文章目录
  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脚本打包啦,后面如果有改进再更新哈。
此处查看项目代码
此处查看页面效果

查看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. 结束语