By 被删

更新日期:

文章目录
  1. 1. 分离webpack和webpack-dev配置
    1. 1.1. 安装babel-polyfill
    2. 1.2. webpack.config.js
    3. 1.3. webpackdev.config.js
    4. 1.4. 修改package.json的命令
  2. 2. 打包代码
    1. 2.1. 使用shell脚本打包代码
    2. 2.2. 使用shelljs打包代码
  3. 3. 结束语

最近又重新拾起了React框架，并配合开源模板gentelella以及Redux建立了个简单的项目。《React-Redux使用笔记》系列用于记录过程中的一些使用和解决方法。
本文记录完善打包生产代码流程的过程。

分离webpack和webpack-dev配置

在开发过程中，我们需要使用到webpack-dev-server。
而在打包生产代码的过程中，我们仅需要使用webpack进行编译打包就够了。

安装babel-polyfill

Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

使用命令安装：

1
npm install babel-polyfill --save-dev

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
// webpack.config.js
var webpack = require('webpack');
var path = require('path'); //引入node的path库
var HtmlwebpackPlugin = require('html-webpack-plugin');

var config = {
    entry: ['babel-polyfill',
        path.resolve(__dirname, 'app/index.js')
    ], //入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), // 指定编译后的代码位置为 dist/bundle.js
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            // 为webpack指定loaders
            {
                test: /\.less$/,
                loaders: ['style', 'css', 'less'],
                include: path.resolve(__dirname, 'app')
            },
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: 'node_modules'
            },
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            title: 'React Biolerplate by Linghucong',
            template: path.resolve(__dirname, 'templates/index.ejs'),
            inject: 'body'
        })
    ],
    devtool: 'source-map'
}

module.exports = config;

webpackdev.config.js

1
2
3
4
5
6
7
8
// webpackdev.config.js
var webpack = require('webpack');
var path = require('path'); //引入node的path库
var HtmlwebpackPlugin = require('html-webpack-plugin');
var config = require("./webpack.config.js");
config.entry.unshift('webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:3333');
module.exports = config;

修改package.json的命令

1
2
3
4
5
// package.json
"scripts": {
  "dev": "webpack-dev-server --config webpackdev.config.js --port 3333 --host 0.0.0.0 --devtool eval --progress --colors --hot --content-base dist",
  "build": "webpack --config webpack.config.js"
}

打包代码

使用shell脚本打包代码

本项目中使用shell脚本打包代码：

1
2
3
4
5
6
7
8
9
// publish.sh
# clean dist
rm -rf dist

# webpack build
npm run build

# copy static
cp -r app/static dist

使用shelljs打包代码

像windows下面，默认没有运行shell脚本的命令，此时我们可以借助shelljs来完成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// publish.js
// https://github.com/shelljs/shelljs
require('shelljs/global');
var webpack = require('webpack');
var webpackConfig = require('./webpack.config.js');

// clean dist
rm('-rf', 'dist');

// webpack build
webpack(webpackConfig, function (err, stats) {
  if (err) throw err
  process.stdout.write(stats.toString({
    colors: true,
    modules: false,
    children: false,
    chunks: false,
    chunkModules: false
  }) + '\n')
});

// copy static
cp('-R', 'app/static/*', 'dist');

结束语

至此，我们完成了打包代码的过程。其实我们也可以直接使用webpack来完成后续的打包流程，不过本骚年还没仔细去研究，这里就先使用shell脚本打包啦，后面如果有改进再更新哈。
此处查看项目代码
此处查看页面效果

码生艰难，写文不易，给我家猪囤点猫粮了喵~

B站: 被删

查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢

作者：被删

出处：https://godbasin.github.io

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

文章目录
  1. 1. 分离webpack和webpack-dev配置
    1. 1.1. 安装babel-polyfill
    2. 1.2. webpack.config.js
    3. 1.3. webpackdev.config.js
    4. 1.4. 修改package.json的命令
  2. 2. 打包代码
    1. 2.1. 使用shell脚本打包代码
    2. 2.2. 使用shelljs打包代码
  3. 3. 结束语