************优化总览
// ( 1 ）配置侧重优化开发体验的文件 webpack.config：
const path = require("path");
const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
const {AutoWebPlugin} = require("web-webpack-plugin ");
const HappyPack = require("happypack");
//自动寻找 pages 目录下的所有目录，将每个目录看作一个单页应用
const autoWebPlugin = new AutoWebPlugin(".／src/pages", {
//II HTML 模板文件所在的文件路径
template: "./template.html ",
//提取所有页面的公共代码
commonsChunk: {
//提取公共代码 Chunk 的名称
name: "Common"
}
});
module.exports = {
// AutoWebPlugin 会为寻找到的所有单页应用生成对应的入口配置，
// 通过 autoWebPlug 工n .en try 方法可以获取生成入口的配置
entry: autoWebPlugin.entry({
// ／／这里可以加入我们额外需要的 Chunk 入口
base: ' ./src/base.js ',
}),
output: {
filename: "[name].js"
},
resolve: {
// 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤
// 其中， d工rname表示当前工作目录 ，也就是项目根目录
modules: [path.resolve(__dirname, 'node_modules')],
// 针对 Npm 中的第三方模块，优先采用 jsnext:main 中指向的 ES6 模块化语法的文件，使用 Tree Shaking 优化
// 只采用 main 字段作为入口文件描述字段，以减少搜索步骤
mainFields: ['jsnext:main', 'main'],
},
module: {
rules: [
{
test: /.js$/,//如果项目源码中只有严文件，就不要写成／＼ .jsx ？$ ／，以提升正则表达式的性能
use: ["happypack/loader?id = babel "],//使用 HappyPack 加速构建
include: path.resolve(__dirname, 'src'),//只对项目根目录下 src 目录中的文件采用 babel -loader
},
{
test: / .js$/,
use: ['happypack/loader?id=ui-component '],
include: path.resolve(dirname, 'src')
},
{
test: / .css/, //增加对 css 文件的支持
use: ['happypack/loader?id=css'],
},
]
},
plugins: [
autoWebPlugin,
// 使用 HappyPack 加速构建
new HappyPack({
id: 'babel',
loaders: ['babel-loader?cacheDirectory'],//babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启
}),
new HappyPack({
//UI 组件加载拆分
id: 'ui-component',
loaders: [{
loader: 'ui-component-loade r',
options: {
lib: 'antd',
style: 'stylelindex.css',
camel2: '-'
}
}],
}),
new HappyPack({
id: 'css',
loaders: ['style-loader', 'css-loader'],//如何处理 .c ss 文件，用法和 Loader 配置中的一样
}),
// II 4.11 提取公共代码
new CommonsChunkPlugin({
chunks: ['common', 'base'],//从 common 和 base 两个现成的 Chunk 中提取公共的部分
name: 'base'//／／将公共的部分放到 base 中
})
],
watchOptions: {
ignored:'node_modules', // II 4.5 使用自动刷新：不监昕的 node modules 目录下的文件
}
}
*******优化总览
配置侧重优化输出质量的文件 webpack-dist.config .js:
//配置侧重优化输出质量的文件
coηst
path = require('path');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoWebPlugin = new AutoWebPlugin("./src/pages", {
//html模板文件所在的路径
template: "./template.html",
//提取所有页面的公共chunk代码
commonsChunk: {
name: "common"
},
//指定存放css文件的cdn目录url
stylePublicPath: "//css.cdn.com/bin"
})
module.export = {
// AutoWebPlugin会为寻找到的所有单页应用生成对应的入口配置
//通过AutoWebPlugin.entry方法可以获取生成入口的配置
entry: autoWebPlugin.entry({
base: "./src/base.js"
}),
output: {
//座位数出名加上hash值
filename: "[name]_[chunkhash:8].js",
path: path.resolve(__dirname, "./dist"),
//指定存放js文件的cdn目录url
publicPath: "//js.cdn.com/id/"
},
resolve: {
// 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤，
// 其中__dirname便是当前工作目录，也就是项目根目录，
modules: [path.resolve(__dirname, "node_modules")],
// 只采用main字段作为入口描述文件描述字段，以减少搜索步骤
mainFields: ['jsnext.js', 'main']
},
modules: {
rules: [
{
//如果项目中只有js文件，就不要写成jsx，以提升正则表达式的性能
test: /.js$/,
//使用happypack加速构建
use: ['happypack/loader?id=babel'],
//支队项目中src目录下的 文件采用babel-loader转换
include: path.resolve(__dirname, 'src')
},
{
test: /.js$/,
use: ['happypack/loader?id=ui-component'],
include: path.resolve(__dirname, 'src')
},
{
test: /.css$/,
//提取chunk中的css代码到单独文件中
use: ExtractTextPlugin({
use: ['happypack/loader?id=css'],
//指定存放css中导入的资源（图片）的cdn目录的url
publicPath: "//img.cdn.com/id"
})
}
]
},
plugins: [
autoWebPlugin,
//4.14开启的
new ModuleConcatenationPlugin(),
//4.3使用的
new HappyPack({
//用唯一的标识符id代表当前的happypack用来处理一些特定的文件
id: "babel",
//babel-loader支持缓存转出的结果，通过cacheDirectory选项开启
loaders: ['babel-loader?cacheDirectory']
}),
new HappyPack({
//ui组件加载拆分
id: "ui-component",
laoders: [
{
loader: 'ui-component-loader',
options: {
lib: "antd",
style: "style/index.css",
came12: '-'
}
}
]
}),
new HappyPack({
id: "css",
// 如何处理。css文件用法和loader配置中的一样
// 通过minimize选项压缩css代码
loaders: ['css-loader?minimize']
}),
new ExtractTextPlugin({
//位数的css文件名加上hash值
filname: "[name]_[contenthash:8].css"
}),
// 4-11提取公共代码
new CommonsChunkPlugin({
//从common和base现成的chunk中提取代码
chunks: ['common', 'base'],
//将公共部分放在base中
name: "base"
}),
new DefinePlugin({
//定义NODE_ENV环境变量为production，去除react代码中开发时才需要的部分
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
//使用ParallelUglifyPlugin并行压缩输出的js代码
new ParallelUglifyPlugin({
uglifyJS: {
output: {
//最紧凑的输出
beautify: false,
//删除所有注释
comments: false
},
compress: {
warnings: false,//在uglifyJS删除没有用到的js代码
drop_console: true,//删除所有的console.log语句，可以兼容ie浏览器
collapse_vars: true,//内嵌定义但是只用到一次的变量
reduce_vars: true,//提取出现多次但没有定义变量去引用的静态值
}
}
})
]
}