模式：
webpack4中可以直接指定模式，以现实不同环境对打包代码做不同的处理，2而webpack2,3中是通过插件进行代码压缩以及改变环境变量的
module.exports = {
mode: ‘development‘,
};
//相当于
module.exports = {
devtool:‘eval‘,
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("development")
})
]
}
开启开发模式对开发友好，不会对代码进行压缩
module.exports = {
mode: ‘production‘,
};
//相当于
module.exports = {
plugins: [
new UglifyJsPlugin(/*...*/),
new webpack.DefinePlugin({ //改变环境变量
"process.env.NODE_ENV": JSON.stringify("production")
}),
new webpack.optimize.ModuleConcatenationPlugin(),//预编译所有模块到一个闭包中，提升你的代码在浏览器中的执行速度。
new webpack.NoEmitOnErrorsPlugin()//在编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误。
]
}
生产模式不用对开发友好，只需要关注打包的性能和生成更小体积的bundle
loader：
css-loader和style-loader从名称看起来功能很相似，然而两者的功能有着很大的区别，但是他们经常会成对使用；安装方法：
npm i -D css-loader style-loader
css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们。
css-loader解析css文件以字符串的形式，变成common.js插入到js文件中
style-loader用来将css-loader生成的样式表通过<style>标签，插入到页面header中去。
用来处理sass和less样式的。安装方法：
npm i -D sass-loader less-loader node-sass
配置：
{
//其他配置
rules: {
test: /\.scss$/,
use: [{
loader: ‘style-loader‘
}, {
loader: ‘css-loader‘
},{
loader: ‘sass-loader‘
}]
},{
test: /\.less$/,
use: [{
loader: ‘style-loader‘
}, {
loader: ‘css-loader‘
},{
loader: ‘less-loader‘
}]
}
}
原文：https://www.cnblogs.com/wmydb/p/13624053.html