[React项目总结] 基于 webpack 搭建前端工程基础篇

[React项目总结] 基于 webpack 搭建前端工程基础篇 #1

Labels

Milestone

Assignees

2 participants

Notifications

目录

1. 技术选型

2. webpack 基础

2.1安装 webpack

$ npm install -g webpack
$ webpack -v => webpack 1.13.0

$ npm install webpack --save-dev

2.2 webpack 简介

2.3 使用 webpack-dev-server 启动服务器

--line

$ webpack-dev-server --line

var config = {
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
path.resolve(__dirname, 'app/index.js')
],
}

--line --hot

--hot

webpack/hot/dev-server

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.

webpack/hot/dev-server

new webpack.HotModuleReplacementPlugin()

hot:true

<!-- webpack.config.js -->
var webpack = require('webpack');
var path = require('path');
var config = {
entry: [
path.resolve(__dirname, 'app/index.js')       // 定义入口文件
],
output: {                                       // 定义出口目录
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
publicPath: '/'
},
resolve: {                                      // resolve 指定可以被 import 的文件后缀
extensions: ['', '.js', '.jsx']
},
module: {
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
}

module.exports = config;

<!-- server.js -->
var webpack = require('webpack');
var webpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');

var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
contentBase: './app',
stats: { colors: true }
});

config.entry.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");

server.listen(8080, "localhost", function(err) {
if(err) {
console.log(err);
}
console.log('Listening at localhost:8080...');
});

<!-- package.json -->
"scripts": {
"start": "node server.js"
}

npm start

3. 配置 React, ES6 & Babel 6

presets

.babelrc

// .babelrc
{
"presets": [
"es2015",
"react"
]
}

* babel-loader: 转换JSX
* babel-core: 即babel的包
* babel-preset-es2015: es2015的babel预设

4. 使用 ESlint 进行代码检查

特点:

配置:

.eslintrc

package.json

.eslintrc

.eslintrc

$ touch .eslintrc

{
"parserOptions": {
"ecmaVersion": 6,  // 指定ECMAScript 版本
"sourceType": "module", // 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
"ecmaFeatures": {
"jsx": true // 启用 JSX
}
}
}

{
"env": {
"browser": true,
"node": true,
"es6": true,
"mocha": true
}
}

"plugins": [
"plugin1",
"eslint-plugin-plugin2"
]

{
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"]
}
}

{
"parserOptions": { //EsLint通过parserOptions，允许指定校验的ecma的版本，及ecma的一些特性
"ecmaVersion": 6, //指定ECMAScript支持的版本，6为ES6
"sourceType": "module", //指定来源的类型，有两种”script”或”module”
"ecmaFeatures": { // ecmaFeatures指定你想使用哪些额外的语言特性
"jsx": true //启动JSX
}
},
"parser": "babel-eslint", // EsLint默认使用esprima做脚本解析，也可以切换成babel-eslint解析
"env": { // Environment可以预设好的其他环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等
"browser": true,
"node": true,
"es6": true,
"mocha": true
},
"plugins": [ // EsLint允许使用第三方插件
"react"
],
extends: [ // Extends是EsLint默认推荐的验证你可以使用配置选择哪些校验是你所需要的
"eslint:recommended"
],
rules: [ // 自定义规则
],
"globals": { // 即插件在执行过程中用到的其它全局变量
}
}

SublimeLinter
SublimeLinter-contrib-eslint

4.11工作流集成

4.12 更多参考

4.13 运行 

"eslint app

5. 样式处理

$ npm install css-loader style-loader sass-loader node-sass --save-dev

devtool: "source-map",
module: {
loaders: [
{
test: /(\.css|\.scss)$/,
loaders: ["style", "css?sourceMap", "sass?sourceMap"]
}
]
}

6. 图片处理

// url-loader 配置
module: {
loaders: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'url?limit=10000&name=img/[hash:8].[name].[ext]', // 图片小于8k就转化为 base64, 或者单独作为文件
'image-webpack' // 图片压缩
]
}
]
}

// file-loader 配置
module: {
loaders: [
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]', // 生成 md5 hash 格式的文件名
'image-webpack' // 图片压缩
]
]
}

url-loader?limit=8192

7. 配置生产环境

plugins: [
...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production') // or development
}),
]

var isProduction = function () {
return process.env.NODE_ENV === 'production';
};

new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})

output: {
...
filename: '[chunkhash:8].bundle.js' // chunkhash 默认是16位，可自定义配置
...
},

html-webpack-plugin

// 在 app 目录下建一个 index.tpl.html 作为钩子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div id="root"></div>
</body>
</html>

// 在 webpack.config.dev.js 和 webpack.config.prod.js 添加配置代码，即可生成相对应的 index.html
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.tpl.html',
inject: 'body',
filename: 'index.html'
})
]

8 构建流程图

最终实现的构建流程如下图所示：

Configuration tasks

npm start

npm run start:prod

npm run build

npm run lint

npm run lint:watch

npm run remove:build

npm run clean:build

9. 文件说明

.babelrc

.eslintrc

server.js

webpack.config.dev.js

webpack.config.prod.js

10. 参考：