webPack打包原理和基本配置
webpack实际上是一个静态模块打包工具
webpack 处理项目时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。
打包调试命令
npm run dev
npm run build
基本配置
module.exports = {
// 入口文件
entry: {
app:'./src/js/index.js'
},
// 在哪里输出它所创建的
bundles output: {
filename:'[name].bundle.js',
path: path.resolve(__dirname,'dist'),
publicPath:'/'
//确保文件资源能够在 http://localhost:3000 下正确访问
},
// 开发者工具
source-map devtool:'inline-source-map', // 创建开发者服务器 devServer: {
contentBase:'./dist', hot:true// 热更新
},
plugins: [
// 删除dist目录
new CleanWebpackPlugin(['dist']
),
// 重新穿件html文件
new HtmlWebpackPlugin({
title:'Output Management'
}),
// 以便更容易查看要修补
(patch)的依赖 new webpack.NamedModulesPlugin(),
// 热更新模块
new webpack.HotModuleReplacementPlugin() ],
// 环境 mode:"development",
// loader配置
module: {
rules: [ {test: /\.css$/, use: ['style-loader','css-loader']
}, {
test: /\.(png|svg|jpg|gif)$/, use: ['file-loader']
}
]
}
}
entry（入口文件配置）
entry: './path/to/my/entry/file.js'
// 或者（对象写法）
entry: {
main: './path/to/my/entry/file.js'
}
多页面应用程序
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
output（输出文件配）
output: {
filename:'[name].bundle.js',
chunkFilename: [name].min.js,
path: path.resolve(__dirname,'dist'),
publicPath:'/'
//确保文件资源能够在 http://localhost:3000 下正确访问}复制代码
filename： 输出文件名
chunkFilename：此选项决定了非入口文件的名称
path：所有输出文件的目标路径
publicPath: 指定资源文件引用的目录,build后的文件，资源引用路径前缀
devtool（调试工具：文件映射）
// dev
devtool: 'eval-source-map'
// prod
devtool: 'source-map'
devServer
devServer: {
compress:true,
port: 9000,
hot:true,
https:true,
overlay: {
warnings:false,
errors:true
},
publicPath:'/platform/redapply/'}复制代码
compress：启用gzip压缩
port: 端口号
hot：是否启用Hot Module Replacement特性
https：可以使用自签名的证书，同样可以自定义签名证书 | boolean、object
overlay：在浏览器上全屏显示编译的errors或warnings | boolean、object
publicPath：打包的文件将被部署到该配置对应的path。
mode（告诉webpack相应地使用其内置优化）
// dev
mode: 'development'
// build
mode: 'production'
plugins（插件）
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"' }
}),
]
module.rules（loader配置）
module: { rules: [ {test: /\.css$/, use: ['style-loader','css-loader'] }, {test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] } ]}复制代码
对于loader的执行顺序，是从后往前的
