一步步学习webpack2 配置

const path = require("path");
module.exports = {
entry:"./src/main.js",
output:{
filename:"[name].js",
path:path.resolve(__dirname, 'dist'),
publicPath:"./dist/" //资源的路径

},
mode:"development",
module:{
rules:[
{
test:/\.css$/,
loader:["style-loader","css-loader"]
},
{
test:/\.png|\.jpg|\.gif$/,
loader:'file-loader'
},
{
test:/\.scss$/,
loader:["style-loader","css-loader","sass-loader"]
}

]

},
//devtool:"eval",
watch:true, //是否监听文件的改变后，重新构建
externals:{ //哪些文件不打包，从外部引入。如jquery 可以在文件中使用 import $ from 'jquery' 实际上打包时并没有 $也不会报错
jquery:"$"
},
performance:{
maxEntrypointSize: 10, //入口文件最大未多少
maxAssetSize: 10, //每个打包后的文件最大为多少
hints: "warning",
assetFilter(name){ //可以通过文件名过滤哪些文件有大小限制
console.log("===="+name);
return true;
}
}
,
//stats:"errors-only" //输出哪些信息

}

 

{
"name": "webpack3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"node-sass": "^4.9.4",
"sass-loader": "^7.1.0",
"scss-loader": "^0.0.1",
"style-loader": "^0.23.1",
"webpack": "^4.23.0",
"webpack-cli": "^3.1.2"
}
}