前言
webpack是目前前端开发必不可少的一款模块加载器兼构建工具，它能极其方便的处理各种资源的打包和使用， 让前端开发获得与后端开发几乎一致的体验。
webpack特点
- webpack 是以 commonJS 的形式来书写脚本的，可以直接使用 require或者import(es6写法，配置babel支持) 的写法来引入各模块
- webpack除了支持编译js为模块外，webpack也支持编译html，css, js, less, jsx，图片等非常多的资源为模块，只需要配置一下对应的加载器即可
- webpack还可以直接替代能替代不少原本属于gulp的工作，比如打包，压缩，混淆，图片转base64等
- webpack提供了配套的dev-server，并且支持热更新（配置热更新插件），无须自己用nodejs配置一个热更新httpServer，开发调试非常便捷
- webpack支持自定义插件，可以很容易的扩展特定的功能，比如目前如日中天的react，就有一款react-hot-loader插件来支持react项目的热更新
如何使用webpack
- 在项目中安装webpack
npm install webpack --save-dev
- 在项目的根目录新建一个
webpack.config.js文件，加入各配置项 - 使用webpack命令行运行指令，比如
webpack --display-error-details，对项目进行编译打包
webpack 2常用配置参数介绍
// file -> webpack.config
var webpackConfig = {
// 需要编译的入口文件配置
entry: {
index: ‘./app/entry/index.js‘, // index 指模块的名称，其他配置项加入模块时需要指定模块名称
login: [ ‘./app/entry/login.js‘ ], // ./src/js/page/login.js 指的是该模块的文件的路径
useinfo: [ ‘./app/entry/userinfo.js‘, ‘./app/entry/user.js‘ ] // 可以将二个文件合并作为一个入口
},
// 编译完的入口文件输出配置
output: {
// 指定编译模块文件的存放目录（/build/js/），不能用于html中的文件引用。
path: path.resolve(__dirname, "build"), //如使用webpack-dev-server, 则该目录的位置应设置为为虚拟web服务器的根目录
// 配置文件在html中引用的根路径，会影响在html中模块的引用路径
publicPath: "/assets/",
//publicPath: "http://cdn.com/assets/",//你也可以加上完整的url，效果与上面一致（不需要修改index.html中引用bundle.js的路径，但发布生产环境时，建议使用HtmlWebpackPlugin插件批量修改引用地址为cdn地址）。
// filename 指输出的每个js模块名称及存放路径的定义，会影响在html中模块的引用路径
filename: "js/bundle.js", // 单页应用只有一个入口文件时使用，在html页面上通过<script src="/js/bundle.js"></script>引用入口模块
filename: "js/[name].js", // 传统多页应用有多个入口文件时使用，[name] 代入entry配置中的任意一项模块的名称，例如：index, 在不同的页面上引用不同的入口，例如在index.html页面上通过<script src="/js/index.js"></script>引用入口模块
filename: "js/[hash]/[chunkhash].js", // 为生产环境实现前端静态资源增量更新时使用，[hash]是根据每次编译后项目总体文件的hash值, [chunkhash]是根据每个模块内容计算出的hash值。
},
// 模块配置
module: {
// 模块处理规则（包括配置模块加载器，模块编译解析规则等等）
rules: [
// es6的js文件使用 babel-loader 来处理，转换成es5
{
// 匹配的模块文件范围
test: /\.js$/,
// 包括哪些范围
include: [
path.resolve(__dirname, "app")
],
// 排除哪些范围
exclude: [
path.resolve(__dirname, "app/demo-files")
],
// 使用多个插件，及指定插件配置
use: [
// "babel-loader", // 不指定插件配置的方式
{
loader: "babel-loader", // 指定插件配置的方式，注：babel的配置建议使用.babelrc来配置
options: {
presets: ["es2015"]
},
},
// 如使用react-hot-loader，则需要在这里加入
‘react-hot-loader/webpack‘
]
},
// 图片文件使用 url-loader 来处理，小于8kb的直接转为base64
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: ‘url-loader‘,
options: {
limit: 8192,
// name 指输出的每个图片模块名称的路径定义
name: ‘images/[name]-[chunkhash].[ext]‘, //[name]指图片文件名, [ext]指图片的后缀名称
},
},
],
},
// less文件使用style-loader, css-loader, less-loader来处理
{
test: /\.less$/,
use: [
‘style-loader‘,
‘css-loader‘,
‘less-loader‘,
extractTextPlugin.extract([‘style‘,‘css‘, ‘less‘]) //
],
},
// pcss文件使用style-loader, css-loader, postcss-loader来处理
{
test: /\.pcss$/,
use: [
‘style-loader‘,
‘css-loader‘,
{
loader: ‘postcss-loader‘,
options: {
plugins: function () {
return [
require(‘postcss-import‘)(), // 在@import css文件的时候让webpack监听并编译
require(‘precss‘), // 类似scss的语法，实际上如果只是想用嵌套的话有cssnext就够了
require(‘postcss-cssnext‘), // cssnext可以让你写CSS4的语言，并能配合autoprefixer进行浏览器兼容的不全，而且还支持嵌套语法
];
},
},
},
],
}
]
},
// 配置如何访问模块
resolve: {
// 配置查找npm依赖包的路径规则，默认是查找node_modules
modules: [
"node_modules",
path.resolve(__dirname, "app")
],
// 使用了哪些文件后缀名
extensions: [".js", ".json", ".jsx", ".css"],
// 模块路径的别名配置，将冗长的模块引用路径配置成简短的模块别名
alias: {
"third": path.resolve(__dirname, "app/third"), // 引用module，使用‘third/module‘
"module": path.resolve(__dirname, "app/third/module.js"), // 引用module，使用‘module‘
}
},
// 性能配置
performance: {
// 当资源不符合性能规则时，以什么方式进行提示, 默认值为waring
hints: "warning", // 输出警告的方式，推荐在开发环境下使用
hints: "error", // 输出错误的方式，推荐在生产环境下使用
hints: false, // 关闭提升
maxAssetSize: 200000, // 单个资源允许的最大文件容量，单位：字节，默认250kb
maxEntrypointSize: 400000, // 单个入口模块引用的所有资源的最大文件容量，单位：字节，默认250kb
// 控制哪些文件需要进行性能检测，默认值如下
assetFilter: function(assetFilename) {
return !(/\.map$/.test(assetFilename))
},
// 控制只有css与js文件需要进行性能检测
assetFilter: function(assetFilename) {
// Function predicate that provides asset filenames
return assetFilename.endsWith(‘.css‘) || assetFilename.endsWith(‘.js‘);
}
},
// 通过增加输出信息的方式为浏览器开发者工具增强调试
devtool: "source-map", // 为模块生成单独的source-map文件，会大幅影响编译速度
devtool: "eval", // 不生成sourceMap, 但是命名模块，编译速度最快.
devtool: "cheap-module-eval-source-map", // 开发环境推荐
devtool: "cheap-module-source-map", // 生产环境推荐
// 使用 cheap 模式可以大幅提高 souremap 生成的效率。大部分情况我们调试并不关心列信息，而且就算 sourcemap 没有列，有些浏览器引擎（例如 v8） 也会给出列信息。
// 使用 eval 方式可大幅提高持续构建效率。官方文档提供的速度对比表格可以看到 eval 模式的编译速度很快。
// 使用 module 可支持 babel 这种预编译工具（在 webpack 里做为 loader 使用）。
// 使用 eval-source-map 模式可以减少网络请求。这种模式开启 DataUrl 本身包含完整 sourcemap 信息，并不需要像 sourceURL 那样，浏览器需要发送一个完整请求去获取 sourcemap 文件，这会略微提高点效率。而生产环境中则不宜用 eval，这样会让文件变得极大。
// 根路径，默认值是__dirname，基于这个路径去处理配置的模块入口和加载器
context: __dirname, // 默认值
// 编译环境，默认值是web
target: "web", // 浏览器编译环境
// 将配置的模块从bundle文件中分离出来，模块可以是 CommonJS, AMD, global and ES2015 modules 4种类型
externals: {
react: ‘react‘
},
// 配置在编译时输出相关信息
stats: { //object
assets: true,
colors: true,
errors: true,
errorDetails: true,
hash: true,
// ...
},
// 配置开发服务器
// 要使之生效，还需要同时在entry的每一项之前加入‘webpack-dev-server/client?http://{指定的IP}:{指定的端口}‘,
// ‘webpack/hot/log-apply-result‘与‘webpack/hot/only-dev-server‘
// 如使用了react-hot-loader, 则还需要加入‘react-hot-loader/patch‘
devServer: {
// 配置代理服务器
proxy: {
‘/api‘: ‘http://localhost:3000‘ // 访问路由/api，会转发到localhost:3000的地址去
},
contentBase: [ path.resolve(__dirname, "build"), path.resolve(__dirname, "mock") ], // 静态资源路径，需要配置编译后的模块文件存放的路径（同output中的path），也可以在这里配置其他的，比如mock文件存放的路径
compress: true, // 是否开启压缩
historyApiFallback: true, // true for index.html upon 404, object for multiple paths
hot: true, // 是否开启热更新，需要配置HotModuleReplacementPlugin
https: false, // 是否使用https
noInfo: true, // 在热更新时，只会输出错误与警告信息，不会输出其他日志
stats: "verbose" // 输出所有日志
},
// 配置插件（未完待续）
plugins: [
new webpack.EnvironmentPlugin([‘NODE_ENV‘]), // 可以随意指定前端node环境
new webpack.DefinePlugin({
‘process.env‘: {NODE_ENV: JSON.stringify(process.env.NODE_ENV)} // 可以随意指定前端node环境
}),
new extractTextPlugin("css/[name].css"), // css抽取，需要引入模块extract-text-webpack-plugin，并且需要在模块加载器处也加入对应配置
new HtmlWebpackPlugin({ // html插件，定义html模板，生成html文件，并将指定的模块插入html中（需要引入模块html-webpack-plugin）
template: path.join(‘src/‘, ‘template.html‘), // 模板html文件的存放位置
filename: path.join(‘build/‘, ‘index.html‘), // 指输出的每个html文件名称及存放路径的定义
inject: ‘body‘, // 表示插入至body标签内
chunks: [ // 插入的模块在html上会自动使用publicPath与模块的filename作为引用路径
index // 插入index入口模块，也可以插入其他入口模块或者公共模块（比如使用CommonsChunkPlugin提取的common模块）
],
}),
// 提供公共代码
new webpack.optimize.CommonsChunkPlugin(‘common.js‘), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js
new webpack.optimize.CommonsChunkPlugin(‘common.js‘,[‘main‘,‘index‘]), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js, 只提取main节点和index节点
new webpack.optimize.CommonsChunkPlugin({ // 有选择性的提取（对象方式传参）
name: "common", // name可以是做生意模块名（common是公共模块名）注意不要.js后缀
filename: "js/[name].js", // 指定输出的js文件名称及路径
chunks: [‘main‘,‘user‘,‘index‘], // 将指定的入口模块提取出来
minChunks: 2 // 公共模块被使用的最小次数。比如配置为2，也就是同一个模块只有被2个以外的页面同时引用时才会被提取出来作为common chunks。
}),
new webpack.optimize.CommonsChunkPlugin({ // 有选择性的提取（对象方式传参）
name: "index", // name可以是任意模块名，注意不要.js后缀
filename: "js/[name].js", // 指定输出的js文件名称及路径
}),
new webpack.HotModuleReplacementPlugin(), // 热更新插件，使用dev-server必备
new webpack.NoEmitOnErrorsPlugin(), // 在webpack 2中使用NoErrorsPlugin会有警告提示
new webpack.ProgressPlugin(function(percentage, msg) {
logUpdate(percentage * 100 + ‘%‘, msg); // 实时更新编译进度，需要同时使用实时更新日志模块log-update
}),
new webpack.optimize.UglifyJsPlugin({ // 解析/压缩/美化所有的js模块，如有需要，这里可以通过配置except可以防止变量被改变
mangle: {
except: [‘$super‘, ‘$‘, ‘exports‘, ‘require‘]
}
}),
// 自定义插件函数，函数会接受到webpack的编译对象compiler，用this同样也能获取到
function(compiler) {
this.plugin("done", function(stats) { //使用.plugin api增加自定义插件，‘done‘表示触发时机为编译结束后，stats表示编译生成的模块的详细信息
require("fs").writeFileSync(path.join(__dirname, "stats.generated.json"), JSON.stringify(stats.toJson()));
require("open")((‘http://localhost:9090/index.html‘)); // 还可以在编译完成后控制自动唤起浏览器并打开项目的入口页面（需要安装open模块）
});
},
],
};
module.exports = webpackConfig;
webpack 启动 devServer
var webpackConfig = require(‘./webpack.config‘); // 获取webpack配置
var webpack = require(‘webpack‘);
var WebpackDevServer = require(‘webpack-dev-server‘);
var devServerOptions = {
// 配置代理服务器
proxy: {
‘/api‘: ‘http://localhost:3000‘ // 访问路由/api，会转发到localhost:3000的地址去
},
contentBase: [ path.resolve(__dirname, "build"), path.resolve(__dirname, "mock") ], // 静态资源路径，需要配置编译后的模块文件存放的路径（同output中的path），也可以在这里配置其他的，比如mock文件存放的路径
compress: true, // 是否开启压缩
historyApiFallback: true, // true for index.html upon 404, object for multiple paths
hot: true, // 是否开启热更新，需要配置HotModuleReplacementPlugin
https: false, // 是否使用https
noInfo: true, // 在热更新时，只会输出错误与警告信息，不会输出其他日志
stats: "verbose" // 输出所有日志
};
var compiler = webpack(webpackConfig);
var webpackDevServer = new WebpackDevServer(compiler, devServerOptions);
webpackDevServer.listen(‘9090‘, ‘http://localhost‘, function (err) {
if (err) {
console.error(err);
}
});
时间： 2024-10-16 10:40:28