1.创建json，npm int
2.引入的依赖用cnpm install xx –save-dev或者npm install xx –save-dev
3.用到的loader和plugin有
“clean-webpack-plugin”: “^3.0.0”,//清理上次打包的文件 “css-loader”: “^2.1.1”,//对js里引入css，导出到js里 “extract-text-webpack-plugin”: “^4.0.0-beta.0”,//分离css从js里 “file-loader”: “^3.0.1”,//生成的图片的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。 “html-webpack-plugin”: “^3.2.0”,//生产html模板 “html-withimg-loader”: “^0.1.16”,//打包html里的，没被依赖的图片 “optimize-css-assets-webpack-plugin”: “^5.0.0”,//压缩css “style-loader”: “^0.23.1”,//对js里引入css，导出到js里 “uglifyjs-webpack-plugin”: “^2.2.0”,//压缩js “url-loader”: “^1.1.2”,//压缩图片文件指定大小的图片道js里 “webpack”: “^4.30.0”,//webpack “webpack-dev-server”: “^3.10.3″//本地服务器 4.入口（多入口）（待优化） entry: { index1: ‘./src/js/index1.js‘, index2: ‘./src/js/index2.js‘, }, 优化：引入配置文件 entry: configReq.entry, 5.出口（指定在dist里，hash避免缓存） output: { filename: ‘js/[name]-[hash].js‘, path: __dirname + ‘/dist‘, }, 6.本地服务器 devServer: { contentBase: “./dist”, //本地服务器所加载的页面所在的目录 port: “8080”, //设置默认监听端口，如果省略，默认为”8080″ inline: true, //实时刷新 historyApiFallback: true //不跳转 }, 7.loader module: { rules: [ //对js里引入css，导出到js里 { test: /\.(css)$/, use: extractTextPlugin.extract({ fallback: “style-loader”, use: [{ loader: “css-loader”, }, ] }) }, //压缩图片 { test: /\.(png|jpg|gif|jpeg)/, //是匹配图片文件后缀名 use: [{ loader: ‘url-loader‘, //指定使用的loader和loader的配置参数 options: { limit: 5 * 1024, //是把小于5KB的文件打成Base64的格式，写入JS outputPath: ‘./image/‘ //打包后的图片放到img文件夹下 } }] }, //打包html的图片 { test: /\.(htm|html)$/i, use: [‘html-withimg-loader‘] } ] }, 8.plugins plugins: [ new webpack.BannerPlugin(‘版权所有，翻版必究‘), new CleanWebpackPlugin(),//清理上次打包的文件 //html模板（待优化） // new htmlPlugin({ // filename: ‘index.html‘, // minify: { //对html文件进行压缩 // removeAttributeQuotes: true, //removeAttrubuteQuotes是去掉属性的双引号。 // }, // chunks: [‘index1‘], //每个html只引入对应的js和css // inject: true, // template: ‘./src/index1.html‘ //打包html模版的路径和文件名称。 // }), // new htmlPlugin({ // filename: ‘index2.html‘, // minify: { //对html文件进行压缩 // removeAttributeQuotes: true, //removeAttrubuteQuotes是去掉属性的双引号。 // }, // chunks: [‘index2‘], // inject: true, // template: ‘./src/index2.html‘ //打包html模版的路径和文件名称。 // }), new extractTextPlugin(“css/[name]-[hash].css”), //提取CSS行内样式，转化为link引入
], optimization: { minimizer: [ //压缩js new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: true // set to true if you want JS source maps }), //压缩css new OptimizeCSSAssetsPlugin({}) ] } //html模板优化的 //生成模版文件 configReq.htmlConfig.forEach((val, i) => { var hcoging = { template: “./src/” + val.name + “.html”, //new 一个这个插件的实例，并传入相关的参数 filename: val.name + “.html”, chunks: [val.name], inject: true, minify: { //压缩HTML文件 removeComments: true, //移除HTML中的注释 removeAttributeQuotes: true, //removeAttrubuteQuotes是去掉属性的双引号。 collapseWhitespace: false //删除空白符与换行符 } } config.plugins.push(new htmlPlugin(hcoging)); }) //配置文件config.js const webpack = require(‘webpack‘); //入口配置 var entry = { index1: ‘./src/js/index1.js‘, index2: ‘./src/js/index2.js‘, } //页面配置 var htmlConfig = [{ name: “index1”, src: __dirname + “/app/page/index.js”, }, { name: “index2”, src: __dirname + “/app/page/list.js”, }]; module.exports = { entry: entry, htmlConfig: htmlConfig } //引入配置 var configReq = require(‘./config.js‘); //读取配置 module.exports = config;//config为webpack配置文件 //还剩公共的方法的处理