webpack的使用
目录
webpack时一个打包用于前端打包的应用，可以使用npm来安装
npm install webpack -g使用-g表示全局安装，这样就可以直接使用webpack命令了
现在就让我们来一步步新建一个简单的React应用，并使用webpack来打包生成线上版本
首先，建立一个文件夹
mkdir lesson_1进入文件夹中，我们先用npm初始化
npm init一直回车直到最后提示使用yes确定即可
现在目录下多了个package.json
现在我们来安装依赖包
npm install --save-dev webpack react react-dom babel-core babel-loader babel-preset-es2015 babel-preset-react jsx jsx-loader这里说下几个包都代表什么：
- webpack 我们使用其来打包应用
- react、react-dom 我们使用这两个来渲染视图层
- jsx jsx-loader 我们使用这个来支持jsx语法
- babel-core babel-loader babel-preset-es2015 babel-preset 我们需要用这四个模块来将将es6语法转换成es5语法。
好了，等待npm安装完成后，会发现文件夹内的package.json中增加了刚刚添加的模块依赖[预览]
现在，我们来创建一个简单的HTML页面
touch index.html然后我们写一个简单的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lesson 1</title>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript" src="dist/app.js"></script>
</html>在页面中，引入了一个后面会打包的app.js，其构建前为这个app.jsx
现在我们来建立两个文件夹，dist用来存储构建后的线上版本，src用来存储源码
mkdir src dist现在我们进入到dist目录中，新建一个app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class Welcome extends React.Component {
render() {
return (
<div>
<h3>{this.props.article.title}</h3>
<p>{this.props.article.content}</p>
</div>
);
}
}
const welcomeArticle = {
title: 'Welcome to React World',
content: 'This is a simple React application that is builded using Webpack.'
}
ReactDOM.render(
<Welcome article={welcomeArticle} />,
document.getElementById('container')
);我们使用React创建了一个简单的应用，会通过传入的article来显示出一个标题与一个内容，其预览如下：
这个jsx中，我们使用了react react-dom 以及es6语法，jsx语法，现在我们要将其使用webpack构建成一个线上版本
在lesson_1中，我们新建一个webpack的配置文件
touch webpack.config.js现在我们来编辑配置文件 我们需要在此文件中加入构建的规则。完整配置如下：
/* 引入webpack */
const webpack = require('webpack');
/* 定义模块路径 */
const modulePath = __dirname + '/node_modules/';
/**
* entry: 配置入口
* output: 配置输入，其中path代表输出路径，filename表示文件名，这里的[name]表示配置入口时传入的名，此处为app
* module: 配置其他模块打包规则，由于webpack仅理解js，所以对于其他类型文件要通过此处做单独处理,
* 每一条规则规则都是一个object，test代表匹配的正则表达式规则，exclude配置模块的路径,
* 匹配到对应的文件后，通过配置的loader来做递归处理。loader是一个数组，里面每个object为一个处理loader
* 此处先使用了jsx-loader处理了jsx语法，然后通过babel-loader，使用es2015和react依赖，将文件处理成es5语法。
* plugins: 此处配置了插件，第一个是定义下输出生产环境，第二个则使用了webpack内置的UglifyJs对文件做了压缩和混淆处理
* resolve: 此处配置自动追加了扩展名，此处配置了js和jsx，因此入口的app.jsx可以改为app即可。
*/
module.exports = {
entry: {
app: './src/app.jsx'
},
output: {
path: __dirname + '/dist',
filename: '[name].js'
},
module: {
rules: [{
test: /\.jsx$/,
exclude: modulePath,
loader: [{
loader: 'jsx-loader'
}, {
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}]
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
warnings: false,
compress: {
join_vars: true,
warnings: false,
},
output: {
comments: false,
},
except: ['$super', '$', 'exports', 'require'],
toplevel: false,
ie8: false,
})
],
resolve: {
extensions: ['.js', '.jsx']
}
};这里我们仅仅打包了一个app.jsx文件，其实可以配置多个入口文件，但入口文件仅限于js文件
本章我们仅仅构建了一个js文件，并没有对其他静态资源处理，下一篇我会引入其他静态文件。好了就到这里吧。
本章github地址为 https://github.com/jarod2011/webpack-tutorials/tree/master/lesson_1