Webpack篇3-流程 0到1

阅读量

  1. npm init

  2. npm i -D webpack@3

  3. have a try

    package.json 中添加 script

    1
    2
    3
    "scripts": {
      "build": "webpack"
    }

新建 /src/index.html 随便写点东西，/src/js/index.js 随便 console.log 一个

新建 /webpack.config.js

1
2
3
4
5
6
7
8
9
const path = require('path');

module.exports = {
    entry: './src/js/index.js',    // 入口文件
    output: {
        filename: 'bundle.js',      // 打包后的文件名称
        path: path.resolve('dist')  // 打包后的目录，必须是绝对路径
    }
}

执行 npm run build

生成 /dist/bundle.js

在 /src/index.html 中引入打包后的 bundle.js

1
<script src="../dist/bundle.js"></script>

打开浏览器运行 index.html 可以看到index.js 中 console 的东西

  1. 配置 HTML 模板

    npm i html-webpack-plugin -D

    修改 /webpack.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: './src/js/index.js',    // 入口文件
        output: {
            filename: 'bundle-[hash].js',      // 打包后的文件名称
            path: path.resolve('dist')  // 打包后的目录，必须是绝对路径
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: __dirname + "/src/index.html",//html模板的路径地址
                filename: 'index.html', //生成的文件名
                minify: {
                    removeAttributeQuotes: true //去掉引号，减少文件大小<script src=index.js></script>
                }
            }),
        ]
    }
    // 此处修改 output 中的 filename 添加 hash 来使用缓存？？？

    去除 /src/index.html 中引入的 script 标签

    执行 npm run build

    生成 /dist/bundle.js 和 /dist/index.html

    打开浏览器运行 /dist/index.html 可以看到index.js 中 console 的东西

  2. 自动清除 dist 文件夹 (因为每次执行 npm run build 都会生成新的 js)

    npm i -D clean-webpack-plugin

    修改 /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
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require("clean-webpack-plugin");

    module.exports = {
        entry: './src/js/index.js',    // 入口文件
        output: {
            filename: 'bundle-[hash].js',      // 打包后的文件名称
            path: path.resolve('dist')  // 打包后的目录，必须是绝对路径
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: __dirname + "/src/index.html",//html模板的路径地址
                filename: 'index.html', //生成的文件名
                minify: {
                    removeAttributeQuotes: true //去掉引号，减少文件大小<script src=index.js></script>
                }
            }),

            new CleanWebpackPlugin('dist/*.*', {
                root: __dirname, //根目录
                verbose: true, //开启在控制台输出信息
                dry: false //启用删除文件
            }),
        ]
    }

    执行 npm run build

    每次执行都会先删除 后添加

  3. 使用 dev-server 构建本地服务器 并开启热更新

    npm i -D webpack-dev-server@2

    package.json 中添加 script

    1
    2
    3
    "scripts": {
      "dev": "webpack-dev-server"
    }

    修改 /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
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require("clean-webpack-plugin");
    const webpack = require('webpack');

    module.exports = {
        entry: './src/js/index.js',    // 入口文件
        output: {
            filename: 'bundle-[hash].js',      // 打包后的文件名称
            path: path.resolve('dist')  // 打包后的目录，必须是绝对路径
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: __dirname + "/src/index.html",//html模板的路径地址
                filename: 'index.html', //生成的文件名
                minify: {
                    removeAttributeQuotes: true //去掉引号，减少文件大小<script src=index.js></script>
                }
            }),

            new CleanWebpackPlugin('dist/*.*', {
                root: __dirname, //根目录
                verbose: true, //开启在控制台输出信息
                dry: false //启用删除文件
            }),

            new webpack.HotModuleReplacementPlugin(),
            new webpack.NamedModulesPlugin(), //显示模块的相对路径
        ],
        devServer: {
            port: 3005, //端口号
            compress: true, //服务器返回浏览器的时候是否启动gzip压缩
            hot: true, //模块热替换 需要webpack.HotModuleReplacementPlugin插件
    		open: true, //打包完成自动打开浏览器

            // headers: { 'Access-Control-Allow-Origin': '*' }, //代理
            // contentBase: path.join(__dirname, './dist'), //静态文件地址
            // host: 'localhost', //主机
            // overlay: true, //如果出错，则在浏览器中显示出错误
            // inline: true, //实时构建
            // progress: true, //显示打包进度
            // historyApiFallback: true,//不跳转
        },
    }

    这样只能实时重新加载热更新，还不能热替换，还需修改入口文件 /src/js/index.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 在最后加上 (使用时删除注释就行)
    if(module.hot) {
        module.hot.accept();
        //    module.hot.dispose(function(data){/*热更新后处理的事情*/
        //        data.abc=module.hot.data.abc;//利用module.hot.data存储内容
        //    });
        //    module.hot.accept('./a.js', function() {/*接受单个文件*/
        //        console.log('Accepting the updated printMe module!');
        //        printMe();
        //    })
        //module.hot.decline('./a.js');/*不接受a.js的更新*/
    }

    // 代码里面的module.hot.accept();表示所有的模块都在收到热更新的消息后都会同意更新。其实这个热更新的accpet是应该写在各个模块js里面的（写在a.js和b.js里面），但是它这里面有一个冒泡机制，就是当前模块没有发现accept，那么就会找上层，因此我们在顶层(index.js)允许所有的模块热更新。

    // 除了全部accpet之外，还可以单个accept以及回调；decline不接受哪个模块的更新；dispose表示模块热更新后消除一些资源或保存一些状态的（可以和module.hot.data一起使用）。

    // 热模块启动，更新会有相应的log，[HMR]是热更新的log，[WDS]是wepback-dev-server监听socket的log。

    执行 npm run dev ；会自动打开浏览器(open属性)

    这样就能热替换，修改 /src/js/index.js 中 console 的值，不会刷新页面，做到局部替换变更的模块

  4. 接下来 使用 ES6, ES7 的最新语法

    在 /src/js/index.js 使用import 导入语法，会报错：

    You may need an appropriate loader to handle this file type.

    使用适合的 loader 来处理

    npm i -D babel-loader babel-core babel-preset-env babel-polyfill

    修改 /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
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require("clean-webpack-plugin");
    const webpack = require('webpack');

    module.exports = {
        entry: './src/js/index.js',    // 入口文件
        output: {
            filename: 'bundle-[hash].js',      // 打包后的文件名称
            path: path.resolve('dist')  // 打包后的目录，必须是绝对路径
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: __dirname + "/src/index.html",//html模板的路径地址
                filename: 'index.html', //生成的文件名
                minify: {
                    removeAttributeQuotes: true //去掉引号，减少文件大小<script src=index.js></script>
                }
            }),

            new CleanWebpackPlugin('dist/*.*', {
                root: __dirname, //根目录
                verbose: true, //开启在控制台输出信息
                dry: false //启用删除文件
            }),

            new webpack.HotModuleReplacementPlugin(),
            new webpack.NamedModulesPlugin(), //显示模块的相对路径
        ],
        devServer: {
            port: 3005, //端口号
            compress: true, //服务器返回浏览器的时候是否启动gzip压缩
            hot: true, //模块热替换 需要webpack.HotModuleReplacementPlugin插件

            // headers: { 'Access-Control-Allow-Origin': '*' }, //代理
            // contentBase: path.join(__dirname, './dist'), //静态文件地址
            // host: 'localhost', //主机
            // overlay: true, //如果出错，则在浏览器中显示出错误
            // open: true, //打包完成自动打开浏览器
            // inline: true, //实时构建
            // progress: true, //显示打包进度
            // historyApiFallback: true,//不跳转
        },
        module :{
            rules: [
                {
                    test: /\.jsx?$/,
                    use: "babel-loader",
                    exclude: /node_modules/,
                  	include: /src/
                },
            ]
        }
    }

    添加 /.babelrc

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
        "presets": [
            ["env",{
                "targets": {
                    "chrome": 52,
                    "browsers": ["last 2 versions", "safari 7"]
                }
            }]
        ]
    }

    修改入口文件 /src/js/index.js

    1
    2
    // 最顶部添加 处理兼容性问题
    import 'babel-polyfill';

    执行 npm run dev , 可以使用 最新的语法了

  5. 接下来 处理 css 样式

    新建 /src/less/index.less 设置个 body 背景色

    在 /src/js/index.js 中 import '../less/index.less'会报错：

    You may need an appropriate loader to handle this file type.

    使用适合的 loader 来处理

    npm i -D style-loader css-loader less-loader less autoprefixer

    修改 /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
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require("clean-webpack-plugin");
    const webpack = require('webpack');

    module.exports = {
        entry: './src/js/index.js',    // 入口文件
        output: {
            filename: 'bundle-[hash].js',      // 打包后的文件名称
            path: path.resolve('dist')  // 打包后的目录，必须是绝对路径
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: __dirname + "/src/index.html",//html模板的路径地址
                filename: 'index.html', //生成的文件名
                minify: {
                    removeAttributeQuotes: true //去掉引号，减少文件大小<script src=index.js></script>
                }
            }),

            new CleanWebpackPlugin('dist/*.*', {
                root: __dirname, //根目录
                verbose: true, //开启在控制台输出信息
                dry: false //启用删除文件
            }),

            new webpack.HotModuleReplacementPlugin(),
            new webpack.NamedModulesPlugin(), //显示模块的相对路径

          	require('autoprefixer') //自动添加前缀
        ],
        devServer: {
            port: 3005, //端口号
            compress: true, //服务器返回浏览器的时候是否启动gzip压缩
            hot: true, //模块热替换 需要webpack.HotModuleReplacementPlugin插件

            // headers: { 'Access-Control-Allow-Origin': '*' }, //代理
            // contentBase: path.join(__dirname, './dist'), //静态文件地址
            // host: 'localhost', //主机
            // overlay: true, //如果出错，则在浏览器中显示出错误
            // open: true, //打包完成自动打开浏览器
            // inline: true, //实时构建
            // progress: true, //显示打包进度
            // historyApiFallback: true,//不跳转
        },
        module :{
            rules: [
                {
                    test: /\.jsx?$/,
                    use: "babel-loader",
                    exclude: /node_modules/,
                  	include: /src/
                },
                {
                    test: /\.(less|css)$/,
                    use: [ "style-loader", "css-loader", "less-loader" ],
                    exclude: /node_modules/,
                  	include: /src/
                },
            ]
        }
    }

    执行 npm run dev 就能看到生效的样式了

    修改 /src/less/index.less 中的样式，能看到浏览器中实时热替换样式模块

  6. 接下来 处理 图片 字体

    新建 /src/imgs/1.jpg 放张图片

    修改 /src/less/index.less 设置个 body 背景图片用 1.jpg 会报错:

    You may need an appropriate loader to handle this file type.

    使用适合的 loader 来处理

    npm i -D file-loader url-loader

    修改 /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
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require("clean-webpack-plugin");
    const webpack = require('webpack');

    module.exports = {
        entry: './src/js/index.js',    // 入口文件
        output: {
            filename: 'bundle-[hash:8].js',      // 打包后的文件名称
            path: path.resolve('dist')  // 打包后的目录，必须是绝对路径
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: __dirname + "/src/index.html",//html模板的路径地址
                filename: 'index.html', //生成的文件名
                minify: {
                    removeAttributeQuotes: true //去掉引号，减少文件大小<script src=index.js></script>
                }
            }),

            new CleanWebpackPlugin('dist/*.*', {
                root: __dirname, //根目录
                verbose: true, //开启在控制台输出信息
                dry: false //启用删除文件
            }),

            new webpack.HotModuleReplacementPlugin(),
            new webpack.NamedModulesPlugin(), //显示模块的相对路径
        ],
        devServer: {
            port: 3005, //端口号
            compress: true, //服务器返回浏览器的时候是否启动gzip压缩
            hot: true, //模块热替换 需要webpack.HotModuleReplacementPlugin插件

            // headers: { 'Access-Control-Allow-Origin': '*' }, //代理
            // contentBase: path.join(__dirname, './dist'), //静态文件地址
            // host: 'localhost', //主机
            // overlay: true, //如果出错，则在浏览器中显示出错误
            // open: true, //打包完成自动打开浏览器
            // inline: true, //实时构建
            // progress: true, //显示打包进度
            // historyApiFallback: true,//不跳转
        },
        module :{
            rules: [
                {
                    test: /\.jsx?$/,
                    use: "babel-loader",
                    exclude: /node_modules/,
                  	include: /src/
                },
                {
                    test: /\.(less|css)$/,
                    use: [ "style-loader", "css-loader", "less-loader" ],
                    exclude: /node_modules/,
                  	include: /src/
                },
                {
                    test: /\.(png|jpg|gif|svg)$/,
                    use: [{
                        loader: 'url-loader',
                        options: {
                            name: '[name]-[hash:8].[ext]',
                            limit: 500,
                            // outputPath: '/dist/images/',//定义图片输出存放的文件夹位置
                            // useRelativePath: true,//设置路径为相对位置
                        }
                    }],
                    exclude: /node_modules/,
                  	include: /src/
                },
                {
                    test: /\.(eot|svg|ttf|woff|woff2)$/,
                    use: 'file-loader',
                    exclude: /node_modules/,
                  	include: /src/
                },
            ]
        }
    }

    这样就可以处理图片了，另外还可以引进Font Awesome字体图标库(字体和样式)

    就可以使用 “fa fa-refresh fa-spin” 类名图标了

  7. 不同环境：

    在生产环境和开发环境其实我们的配置是存在相同点，和不同点的，为了处理这个问题，会创建3个文件:

    • webpack.config.base.js: 共同的配置
      • 自动加载模块 webpack.ProvidePlugin() 引入jQuery 或者 lodash
      • happypack并发执行loader
      • 配置 resolve
        • extensions 省略扩展名
        • alias 别名
    • webpack.config.dev.js: 在开发环境下的配置
      • dev-server
    • webpack.config.prod.js: 在生产环境的配置
      • 压缩代码
      • 抽离css
      • 删除 dist

    通过webpack-merge去做配置的合并，比如:

    npm i -D webpack-merge

    新建 /webpack.config.base.js’

    npm i -D happypack并发执行的loader，并发起来，加快构建

    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
    const path = require('path');
    const webpack = require('webpack');

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const HappyPack = require('happypack');

    module.exports = {
        entry: {
            app: './src/js/index.js' // 入口文件
        },
        output: {
            filename: 'js/bundle-[hash:8].js',      // 打包后的文件名称
            path: path.resolve('dist'),  // 打包后的目录，必须是绝对路径
            // publicPath: '/dist/'
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: __dirname + "/src/index.html",//html模板的路径地址
                filename: 'index.html', //生成的文件名
                minify: {
                    removeAttributeQuotes: true //去掉引号，减少文件大小<script src=index.js></script>
                }
            }),

            new webpack.optimize.CommonsChunkPlugin({
                name: "commons", // ( 公共chunk(commnons chunk) 的名称)
                filename: "commons/commons.js", // ( 公共chunk 的文件名)
                minChunks: 2, // (模块必须被3个 入口chunk 共享)
                // chunks: ["pageA", "pageB"], // (只使用这些 入口chunk)
            }),

            // 自动加载模块
            new webpack.ProvidePlugin({
                $: 'jquery',
                _: 'lodash'
            }),

            // 并发执行 loader，加快构建？持疑问状态
            new HappyPack({
                id: 'babel',
                loaders: [ 'babel-loader' ],
            }),

            require('autoprefixer'), //自动添加前缀
            new webpack.BannerPlugin('版权所有，翻版必究'),
        ],
        module :{
            rules: [
                {
                    test: /\.jsx?$/,
                    use: "happypack/loader?id=babel",
                    exclude: /node_modules/,
                  	include: /src/
                },
                {
                    test: /\.(png|jpg|gif|svg)$/,
                    use: [ {
                        loader: 'url-loader',
                        options: {
                            name: 'imgs/[name]-[hash:8].[ext]',
                            limit: 500,
                            // outputPath: '/dist/images/',//定义图片输出存放的文件夹位置
                            // useRelativePath: true,//设置路径为相对位置
                        }
                    } ],
                    exclude: /node_modules/,
                  	include: /src/
                },
                {
                    test: /\.(eot|svg|ttf|woff|woff2)$/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            name: 'font/[name]-[hash:8].[ext]',
                            // outputPath: '/dist/images/',//定义图片输出存放的文件夹位置
                            // useRelativePath: true,//设置路径为相对位置
                        }
                    }],
                    exclude: /node_modules/,
                  	include: /src/
                },
            ]
        },
        resolve: {
        	// 指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配
        	extensions: ['.js', '.jsx', '.less', '.json'],
            // 别名
            alias: {
        		$: './src/jquery.js'
            },
        },
    }

    新建 /webpack.config.dev.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
    const path = require('path');
    const webpack = require('webpack');
    const merge = require('webpack-merge');
    const baseConfig = require('./webpack.base.conf.js');
    // const HappyPack = require('happypack');
    // const happyThreadPool = HappyPack.ThreadPool({ size: 6 });

    module.exports = merge(baseConfig, {
        module: {
            rules: [
                {
                    test: /\.(less|css)$/,
                    // use: [ 'happypack/loader?id=style', 'happypack/loader?id=css', 'happypack/loader?id=less' ],
                    use: [ 'style-loader', 'css-loader', 'less-loader' ],
                    exclude: /node_modules/,
                  	include: /src/
                },
            ]
        },
        plugins: [
            // 并发执行 loader，加快构建？持疑问状态
            // new HappyPack({
            //     id: 'style',
            //     loaders: [ 'style-loader' ],
            //     // 使用共享进程池中的子进程去处理任务
            //     threadPool: happyThreadPool,
            // }),

            // new HappyPack({
            //     id: 'css',
            //     loaders: [ 'css-loader' ],
            //     // 使用共享进程池中的子进程去处理任务
            //     threadPool: happyThreadPool,
            // }),

            // new HappyPack({
            //     id: 'less',
            //     loaders: [ 'less-loader' ],
            //     // 使用共享进程池中的子进程去处理任务
            //     threadPool: happyThreadPool,
            // }),

            new webpack.HotModuleReplacementPlugin(),
            new webpack.NamedModulesPlugin(), //显示模块的相对路径
        ],
        devServer: {
            port: 3005, //端口号
            compress: true, //服务器返回浏览器的时候是否启动gzip压缩
            hot: true, //模块热替换 需要webpack.HotModuleReplacementPlugin插件
            contentBase: path.join(__dirname, './dist'), //静态文件地址

            // headers: { 'Access-Control-Allow-Origin': '*' }, //代理
            // host: 'localhost', //主机
            // overlay: true, //如果出错，则在浏览器中显示出错误
            // open: true, //打包完成自动打开浏览器
            // inline: true, //实时构建
            // progress: true, //显示打包进度
            // historyApiFallback: true,//不跳转
        },
        devtool: 'inline-source-map', //生成代码映射，查看编译前代码，利于找bug
    });

    新建 /webpack.config.prod.js’

    npm i -D webpack-parallel-uglify-plugin可以并行压缩代码，提升打包效率

    npm i -D extract-text-webpack-plugin提取css，使用link的方式替代style方式

    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
    const path = require('path');
    const webpack = require('webpack');
    const merge = require('webpack-merge');
    const baseConfig = require('./webpack.base.conf.js');
    const CleanWebpackPlugin = require("clean-webpack-plugin");
    const WebpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    const HappyPack = require('happypack');
    const happyThreadPool = HappyPack.ThreadPool({ size: 5 });

    module.exports = merge(baseConfig, {
        output: {
            //配置能帮助你为项目中的所有资源指定一个基础路径
            publicPath: '/'
        },
        module: {
            rules: [
                {
                    test: /\.(less|css)$/,
                    use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: [ 'happypack/loader?id=css', 'happypack/loader?id=less' ],
                    }),
                    // use: [ "style-loader", "css-loader", "less-loader" ],
                    exclude: /node_modules/,
                  	include: /src/
                },
            ]
        },
        plugins: [
            new CleanWebpackPlugin('dist/*', {
                root: __dirname, //根目录
                verbose: true, //开启在控制台输出信息
                dry: false //启用删除文件
            }),

            // 并发执行 loader，加快构建？持疑问状态
            new HappyPack({
                id: 'css',
                loaders: [ 'css-loader' ],
                // 使用共享进程池中的子进程去处理任务
                threadPool: happyThreadPool,
            }),

            new HappyPack({
                id: 'less',
                loaders: [ 'less-loader' ],
                // 使用共享进程池中的子进程去处理任务
                threadPool: happyThreadPool,
            }),

            //抽离css文件插件
            // new ExtractTextPlugin('css/[name].[contenthash:8].css'),
            new ExtractTextPlugin({
                filename:  (getPath) => {
                    return getPath('css/[name].[contenthash:8].css');
                },
                allChunks: true
            }),

            //压缩JS代码插件
            // 1.自带的
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false,
                    drop_console: false,
                }
            }),

            // 2.可以并行压缩代码，提升打包效率
            // new WebpackParallelUglifyPlugin({
            //         uglifyJS: {
            //             mangle: false, //是否混淆代码
            //             output: {
            //                 beautify: false, //代码压缩成一行 true为不压缩 false压缩
            //                 comments: false //去掉注释
            //             },
            //             compress: {
            //                 warnings: false, //在删除没用到代码时 不输出警告
            //                 drop_console: true, //删除console
            //                 collapse_vars: true, //把定义一次的变量，直接使用，取消定义变量
            //                 reduce_vars: true //合并多次用到的值，定义成变量
            //             }
            //         }
            //     }
            // ),

        ],
    });

    用 express 搭建本地服务

    npm i express compression if-env

    新建 /server.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    var express = require('express')
    var path = require('path')
    var compression = require('compression')

    var app = express()

    app.use(compression())

    // serve our static stuff like index.css
    app.use(express.static(path.join(__dirname, 'dist')))

    // send all requests to index.html so browserHistory works
    app.get('*', function (req, res) {
      res.sendFile(path.join(__dirname, 'dist', 'index.html'))
    })

    var PORT = process.env.PORT || 3006
    app.listen(PORT, function() {
      console.log('Production Express server running at localhost:' + PORT)
    })

    修改 package.json 中添加 script

    1
    2
    3
    4
    "scripts": {
      "dev": "webpack-dev-server --config webpack.dev.conf.js",
      "build": "webpack --config webpack.prod.conf.js && node server.js"
    }

    执行 npm run build

    访问 localhost:3006/

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Huang XiaoXin，<br>中意爱笑的小姐姐~<br/><br/>胆小认生，不易相处，<br>年轻无为，卖马为生。