企业网站模板php,微信开放平台 网站应用开发,工业品电商平台排行榜,网站建设与规划心得体会全局安装安装webapck npm i webpack -g 现在我们就可以全局的使用webpack命令了 webpack中基础的命令#xff1a; webpack enter.js output.js --watch 这个命令是将enter.js打包成output.js#xff0c;然后html只需要引用该文件就可以了看如下entry.js,这是简单的js代码。 /… 全局安装安装webapck npm i webpack -g 现在我们就可以全局的使用webpack命令了 webpack中基础的命令 webpack enter.js output.js --watch 这个命令是将enter.js打包成output.js然后html只需要引用该文件就可以了看如下entry.js,这是简单的js代码。 // 这边是处理js逻辑
let people require(./people)
let $ require(jquery)$.each(people, function(key, value){$(body).append(h1people[key].name/h1)
}) 那么如何来打包css文件呢只需要将css也引入到enter.js即可这样跟文件index.html还是只需要引用output.js即可引入css需要几个插件css-loader style-loader由于是静态文件需要编译 require(!style-loader!css-loader!./style.css) 以上为简单的打包如果需要复杂的工程的话webpack推荐使用配置文件来配置webpack的配置文件必须是webpack.config.js上面的配置只需要这样写 module.exports {// 入口文件entry: ./app.js,// 出口文件output: {path: __dirname,filename: bundle.js},// 需要依赖的插件或装载器mudule: {loader: [{test: /\.css$/,loader: style-loader!css-loader}]}
} 以下是一个简易的开发目录 针对该目录配置文件如下ps: 需要将es6转码需要安装 babel-core,babel-loader,babel-env,babel-preset-es2015 module.exports {// 入口文件entry: .src/js/app.js,// 出口文件output: {path: __dirname,filename: bundle.js},// 需要依赖的插件或装载器mudule: {loader: [// css加载{test: /\.css$/,loader: style-loader!css-loader},// es6转码为es2015{test: /\.js/,loader: babel-loader,query: {presets: [es2015] // ps这一块也可以写在.babelrc文件下},exclude: /node_modules/}]},// 自动生成html文件会引入jsplugins: [new webpack.optimize.UglifyJsPlugin(),new HtmlWebpackPlugin({template: ./index.html})]
}
