文件 index: ['./src/pages/index/index.js',],login: './src/pages/login/index.js',},

修改 webpack.dev.conf.js代码

devServer: {
contentBase: path.join(__dirname,"../dist"),publicPath:'/',host: "127.0.0.1",port: "8089",overlay: true,// 浏览器页面上显示错误
// open: true,// 开启自动打开浏览器
// stats: "errors-only",//stats: "errors-only"表示只打印错误：
hot: true // 开启热更新
},//修改package.json
scripts: {
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js","build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js","server": "live-server ./ --port=8888"
},

css-loader",sass-loader"] // 使用postcss不分离的写法 // use: ["style-loader",sass-loader","postcss-loader"] // 此处为分离css的写法 /*use: extractTextPlugin.extract({ fallback: "style-loader",use: ["css-loader","sass-loader"],// css中的基础路径 publicPath: "../" })*/ // 此处为使用postcss分离css的写法 use: extractTextPlugin.extract({ fallback: "style-loader","sass-loader","postcss-loader"],// css中的基础路径 publicPath: "../"

})
},{
test: /.js$/,use: ["babel-loader"],// 不检查node_modules下的js文件
exclude: "/node_modules/"
},{
test: /.(png|jpg|gif)$/,use: [{
// 需要下载file-loader和url-loader
loader: "url-loader",options: {
limit: 5 * 1024,//小于这个时将会已base64位图片打包处理
// 图片文件输出的文件夹
outputPath: "images"
}
}]
}

插件在webpack4.x 运行时会有点问题,后面会提到 //修改 webpack.base.conf.js代码 // 分离css插件参数为提取出去的路径 new extractTextPlugin({ filename: 'css/[name].[hash:8].min.css',}),5.处理css3属性前缀，消除冗余的css代码并压缩css

//属性自动加前缀
npm install postcss-loader --save-dev
//在根目录新建postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')//自动添加css前缀
]
};
//loader里加入postcss
{
test: /.(css|scss|sass)$/,// 此处为使用postcss分离css的写法
use: extractTextPlugin.extract({
fallback: "style-loader",// css中的基础路径
publicPath: "../"

})
}
//修改package.json 加入css要兼容浏览器版本的代码
"browserslist": [
"defaults","not ie < 11","last 2 versions","> 1%","iOS 7","last 3 iOS versions"
]
//消除冗余css代码 使用glob模块去匹配文件所以还要安装glob模块
npm install purifycss-webpack --save-dev
new purifyCssWebpack({
paths: glob.sync(path.join(__dirname,"../src/pages//.html"))
}),//压缩css
npm install optimize-css-assets-webpack-plugin --save-dev
//压缩css
//修改 webpack.prod.conf.js代码
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),

修改 webpack.prod.conf.js代码 //删除dist目录 new cleanWebpackPlugin(['dist'],{ root: path.resolve(__dirname,'../'),//根目录 // verbose Write logs to console. verbose: true,//开启在控制台输出信息 // dry Use boolean "true" to test/emulate delete. (will not remove files). // Default: false - remove files dry: false,

修改 webpack.prod.conf.js代码 //上线压缩 去除console等信息webpack4.x之后去除了webpack.optimize.UglifyJsPlugin //https://github.com/mishoo/UglifyJS2/tree/harmony#compress-options new UglifyJSPlugin({ uglifyOptions: { compress: { warnings: false,drop_debugger: false,drop_console: true } } }),

插件，放在了config.optimization里面,提取js， vendor名字可改 optimization: { splitChunks: { cacheGroups: { vendor: { // test: /\.js$/,test: /[\\/]node_modules[\\/]/,chunks: "initial",//表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all; name: "vendor",//拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成； enforce: true,} } } },//项目里配置了自动提取node_modules里用到的模块如jquery，也可以在原模板里面通过第三方cdn引入，又是另一种配置了。

代码中通过CMD、AMD或者window/global全局的方式访问。

输出,将src目录下的assets文件夹复制到dist目录下 new copyWebpackPlugin([{ from: path.resolve(__dirname,"../src/assets"),to: './assets',ignore: ['.*'] }]),

{ module.exports.plugins.push(new htmlWebpackPlugin(getHtmlConfig(element._html,element.chunks))); })

修改 webpack.prod.conf.js代码 new BundleAnalyzerPlugin() //npm run build 后会打开一个页面