安装： npm install webpack -g npm install webpack-dev-server -g
webpack 配置文件
var path = require(‘path‘); module.exports = { entry: path.resolve(__dirname, ‘app/app.js‘), output: { path: path.resolve(__dirname, ‘build‘), filename: ‘bundle.js‘ } }
配置 package.json
"scripts": {
"start": "webpack-dev-server",
"build": "webpack"
}
npm run build 相当于 webpack,
npm run start 相当于 webpack-dev-server.
安装各种loader
比如babel:npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
webpack配置loadermodule.exports = {
...
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: ‘babel‘,
query: { presets: [‘es2015‘,‘react‘] }
}, ... //"-loader"其实是可以省略不写的，多个loader之间用“!”连接起来。
{ test: /\.css$/, loader: ‘style-loader!css-loader?modules!postcss‘ },
//安装postcss-loader 和 autoprefixer（自动添加前缀的插件）：npm install --save-dev postcss-loader autoprefixer。
{ test: /\.js$/, loader: ‘jsx-loader?harmony‘ },
{ test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘},
{ test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘},
//图片文件使用 url-loader 来处理，小于8kb的直接转为base64
{ test: /\.less$/, exclude: /^node_modules$/, loader: ExtractTextPlugin.extract(‘style‘, [‘css‘, ‘autoprefixer‘, ‘less‘]) }
] }, postcss: [ require(‘autoprefixer‘)//调用autoprefixer插件 ],
... };
loaders:[{
test:一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
loader:loader的名称（必须）
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
query:为loaders提供额外的设置选项（可选）
}]
安装postcss-loader 和 autoprefixer（自动添加前缀的插件）：
npm install --save-dev postcss-loader autoprefixer。
devServer
devServer: {
contentBase: "./public", // 本地服务器所加载的页面所在的目录
colors: true, // 终端中输出结果为彩色
historyApiFallback: true, // 不跳转
inline: true // 实时刷新
}
plugins
Hot Module Replacement：
它允许在修改组件代码后，自动刷新实时预览修改后的效果。
① 在webpack配置文件中添加HMR插件；
plugins: [
new webpack.HotModuleReplacementPlugin()//热加载插件
],
② 在Webpack Dev Server中添加“hot”参数devServer:{ historyApiFallback:true, hot:true, inline:true, progress:true,//报错无法识别，删除后也能正常刷新},
HtmlWebpackPlugin：依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）
npm install --save-dev html-webpack-plugin
移除生成文件夹，利用此插件，index.html文件会自动生成，此外CSS已经通过前面的操作打包到JS中了。
在app目录下，创建一个index.tmpl.html文件模板，这个模板包含title等必须元素，在编译过程中，插件会依据此模板生成最终的html页面，会自动添加所依赖的 css, js，favicon等文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id=‘app‘>
</div>
</body>
</html>
webpack常用的命令
webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包 webpack --watch //监听变动并自动打包 webpack -p//压缩混淆脚本，这个非常非常重要！ webpack -d//生成map映射文件，告知哪些模块被最终打包到哪里了 其中的 -p 是很重要的参数，曾经一个未压缩的 700kb 的文件，压缩后直接降到 180kb （主要是样式这块一句就独占一行脚本，导致未压缩脚本变得很大）
时间： 2024-10-22 11:21:01