webpack@1.x 基础配置

webpack

目前 webpack 已经更新到 3.x 版本，但是还有很多公司由于历史原因，不能够去升级 webpack 版本，猜测可能原因包括太多项目都使用 1.x 版本，同时构建端也统一都是 1.x 版本，如果需要升级更新就需要投入一定的人力资源去测试，最近刚好在整理 webpack 1.x 配置文件内容，借此记录下整理出来的版本内容。

webpack@1.x 基础配置

写在前面

有了这次 webpack@1.x 的整理经验，也让我更加深入的了解了各个配置项的实际作用及 webpack 的核心内容及工作方式，所以建议每个人还是亲手去每一项、每一项的去测试体验，这样才能更加深刻的理解每个配置项的作用，以便应用到实际工作中。以下整理出的内容会根据实际项目把变量提出去来当做常量控制，适应不同项目对插件应用的方式，因为会使用 babel，所以最好的使用方式就是通过配置 .babelrc 的方式，以下也会对此进行讲解。

webpack.config.js 文件内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");   // 抽取 css 插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');  // 压缩、优化 css 插件
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const IS_EXTRACT_CSS = true;    // 是否开启抽取 css 文件，true 开启，false 不开启
const env = process.env.NODE_ENV;   // 开发环境为 develop
const config = {
    devtool: 'source-map',  // 生成 SourceMap 文件
    output: {
        libraryTarget: 'var',   // 暴露返回值给一个变量
        library: '',    // 不对外暴露任何名称
        umdNamedDefine: false   // 不定义 umd 名称
    },
    module: {
        // 在 loaders 之前对代码进行 eslint 检查
        preLoaders: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'eslint-loader'
            }
        ],
        loaders: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: path.join(process.cwd(), '.cache')
                }
            }, {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
                loader: 'file-loader'
            }
        ]
    },
    postcss: [
        autoprefixer({
            browsers: ['last 3 versions', '> 1%']
        }),  // 样式添加前缀，兼容浏览器查看地址：http://browserl.ist/?q=%3E+1%25%2C+Last+3+versions
        precss
    ],
    resolve: {
        extensions: ['', '.js', '.jsx', '.css', '.less'],   // 解析组件的文件后缀白名单
        // 配置路径别名，模块内可以直接使用别名
        alias: {
            'common_path': path.join(__dirname, 'source/common'),
            'modules_path': path.join(__dirname, 'source/modules'),
            'pages_path': path.join(__dirname, 'source/pages')
        }
    },
    // 排除以下内容打包到 bundle，减小文件大小
    externals: {
        'react': 'window.React',
        'react-dom': 'window.ReactDOM',
        './React': 'React',
        './ReactDOM': 'ReactDOM'
    },
    plugins: []
};
// 判断是否抽取 css 文件
if (IS_EXTRACT_CSS) {
    config.module.loaders.push(
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!postcss-loader')
        }, {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!postcss-loader!less-loader')
        }
    );
    config.plugins.push(
        new ExtractTextPlugin("[name].css")    // 提取组件 css 文件
    );
} else {
    config.module.loaders.push(
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader?sourceMap!postcss-loader'
        }, {
            test: /\.less$/,
            loader: 'style-loader!css-loader?sourceMap!postcss-loader!less-loader'
        }
    );
}
// 生产环境则压缩打包代码
if (env !== 'develop') {
    config.plugins.push(
        // 压缩 css
        new OptimizeCssAssetsPlugin({
            cssProcessor: require('cssnano'),   // 加载 cssnano 优化 css
            cssProcessorOptions: {
                discardComments: {
                    removeAll: true // 删除所有注释
                }
            }
        }),
        // 解析、压缩 js 代码
        new webpack.optimize.UglifyJsPlugin({
            comments: false,    // 去掉注释
            compress: {
                warnings: false // 忽略警告
            }
        }),
        new webpack.optimize.OccurrenceOrderPlugin()   // 模块最短 ids 长度
    );
    delete config.devtool;  // 不生成 SourceMap 文件
}
module.exports = config;

.babelrc 配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    "presets": [
        "react",
        "stage-0",
        ["env", {
            "targets": {
                "browsers": ["last 3 versions", "> 1%"]
            }
        }]
    ],
    "plugins": [
        "jsx-control-statements",
        "transform-decorators-legacy", 
        "transform-es3-member-expression-literals", 
        "transform-es3-property-literals"
    ]
}

package.json 部分插件版本

如果插件版本和 webpack 版本未对上，也会导致变异错误而无法使用 webpack 编译，以下为部分使用插件版本，以下版本可以项目根据实际情况作出调整

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
    "autoprefixer": "^7.0.1",
    "babel-core": "^6.17.0",
    "babel-eslint": "^6.1.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-class-properties": "^6.9.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
    "babel-plugin-transform-es3-property-literals": "^6.22.0",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.3",
    "cssnano": "^3.10.0",
    "eslint": "^3.19.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-react": "^6.4.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.11.1",
    "jsx-control-statements": "^3.1.5",
    "less": "^2.7.1",
    "less-loader": "^3.0.0",
    "optimize-css-assets-webpack-plugin": "^1.3.1",
    "postcss-loader": "1.0.0",
    "precss": "^1.4.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1",
    "webpack-livereload-plugin": "^0.8.1"
}
分享到