package.json
通过node的命令来执行编译
"scripts": {
"dev": "webpack --config webpack.config.dev.js --mode development",
"build": "webpack --config webpack.config.pro.js --mode production"
}
webpack.config.js
webpack的默认配置文件
mode: 'production', // 运行模式,有三种 'development'、'production'、'none'
entry: { // 入口文件的配置,可以配置多个入口文件
main: './src/index.js',
page: './src/page.js'
},
module: { // 识别非js文件的模块配置
rules: [
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
limit: 2048
}
}
}
]
},
output: { // 打包输出文件的配置
filename: '[name].js' // 按入口文件命名打包后输出的文件
}
loader篇
文件 loader
url-loader // file-loader的升级版,可以将容量小的图片转化为base64格式
css loader
style-loader
css-loader
sass-loader
postcss-loader
plugin篇
网友评论