概述webpack配置，以及插件的使用和介绍
推荐升级webpack4，总结一下优势。 原文链接,webpack 4 发布..
- webpack 4 更快（速度提升98%）！
- Mode, 零配置以及默认值 在配置中需要加上 --mode development 或者是--mode production 来标注你的开发环境 不加会warn不报错
- WebAssembly 支持
- 支持 webpack 4。甚至最流行的库例如 lodash-es, RxJS 已经支持 sideEffects 选项，因此使用它们的最新版后你会发现打包体积会大幅度的减小。
- 太多了，详细请移步官方升级文档
工欲善其事必先利其器
温馨tips：默认已经装好node开发环境，版本不低于6.11。下载node->>>>node官网.. 我这里使用的yarn来进行环境搭建。语法和npm差别不大。
npm install -g yarn
//创建目录 webpackEnv
//进入webpackEnv yarn init，创建工程化目录已经一些信息，可以直接enter，项目目录下会自动生成package.json
yarn add webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 style-loader css-loader less-loader file-loader url-loader html-webpack-plugin babel-preset-react webpack-cli --dev
or
npm install webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 style-loader css-loader less-loader file-loader url-loader html-webpack-plugin babel-preset-react webpack-cli --save-dev
package.json里面就是这些依赖包(文章最后我会解释一下这些包的作用)
{
"name": "zhReactNEW",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.26.0", //编译源码到其他源码 babel主要工作的核心模块
"babel-loader": "^7.1.4",//babel加载其他loader的主要模块
//babel-preset 系列打包了一组插件
"babel-preset-es2015": "^6.24.1", //打包了 es6 的特性
"babel-preset-react": "^6.24.1",//编译react jsx的文件
"babel-preset-stage-0": "^6.24.1",//S7一些提案的支持，Babel通过插件的方式引入，让Babel可以编译ES7代码
"css-loader": "^0.28.11", //css的兼容前缀prefx都会自动处理 配合style-loader使用
"file-loader": "^1.1.11",//引入其他文件
"html-webpack-plugin": "^3.2.0",//引入html模板
"less-loader": "^4.1.0", //编译less
"style-loader": "^0.20.3", //css文件作为<style>的内容插入到模版文件配合css-loader使用
"url-loader": "^1.0.1",//引入url
"webpack": "^4.5.0", //这个还需要说么。。
"webpack-cli": "^2.0.14",//webapck4以后的新模块，
"webpack-dev-server": "^3.1.2"//webpack服务
},
}
准备工作已经做好，开始配置环境
进入webpackEnv，此时有package.json，node_modules,yarn.lock。在当前位置创建index.html(如页面入口)和一个src文件夹(用来存放源文件)
创建webpack.config.js 来进行关键的 webpack配置。webpack.config.js文件通常放在项目的根目录中，它本身也是一个标准的Commonjs规范的模块。
1，首先要暴露出一个模块,这是webpack去引入的配置，作为模块开发最基本的东西。
module.exports = {
}
2，定义主文件的入口和最终打包的位置已经名字。
let path = require('path');//这里需要引用path这个模块
module.exports = {
entry:"./src/index.js",//webpack打包入口js文件，我在src下面创建了一个index.js
output:{
filename:'bundle.js',//打包输入文件的名字
path:path.resolve('./dist'),//这里需要引入node内置的模块path，path.resolve方便我们解析路径片段(./dist)为绝对路径
}
}
3，module--模块的加载相关，我们就定义在module.rules(为什么不是loaders，下面有解释)中。这里通过正则表达式去匹配不同后缀的文件名，然后给它们定义不同的加载器。比如说给less文件定义串联的三个加载器：
module.exports = {
...
module:{
rules:[
{
test:/\.js$/,
use:"babel-loader",
exclude:/node_modules/
},
{
test:/\.css$/,
use:["style-loader","css-loader"],
},
{
test:/\.less$/,
use:["style-loader","css-loader","less-loader"],
}
]
},
}
有人问我为什么不是。module.loaders，这也算webpack升级的一个改进，因此这里为了避免兼容问题，小伙伴还是使用rules.好一点
同时介绍一个插件html-webpack-plugin 作用：这里同时会使用一个插件来渲染主页面html，简单做一个介绍 简化了html文件的创建，同时会把打包的webpack其他文件自动引入到html中,使用起来还是非常舒服的官方说明
...
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
...
plugins:[
new HtmlWebpackPlugin({
template:'./index.html'
})
]
}
最后配置一个Babel的presets配置,这里是来配置babel中的解析规则， 创建一个.babelrc文件
//"presets":["babel-preset-es2015","babel-preset-stage-0","babel-preset-react"] 这里babel-preset是可以省略不写的
"presets":["es2015","stage-0","react"]
我们现在来说明下这个配置文件是什么意思。首先，这个配置文件是针对babel 6的。Babel 6做了一系列模块化，不像Babel 5一样把所有的内容都加载。比如需要编译ES6，我们需要设置presets为"es2015"，也就是预先加载es6编译的相关模块，如果需要编译jsx，需要预先加载"react"这个模块。那问题来了，这个"stage-0"又代表什么呢？
事实上， ”stage-0"是对ES7一些提案的支持，Babel通过插件的方式引入，让Babel可以编译ES7代码。当然由于ES7没有定下来，所以这些功能随时肯能被废弃掉的。
这里大体上就已经给webpack配置完毕了。
在src/index.js中加入一些内容来添加主文件。
alert(1);
见证奇迹的时候，
wait:在命令窗里输入webpack太low 我们来配置一下 快捷命令
打开pakepage.json
{
...
"scripts": {
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
}
}
这里配置scripts 之后就可以用 npm run *** (dev/build) 来启动webpack-dev-server 或者build了 为什么后面要加--mode development/production 这里也是webpack4的一些优化，制定开发环境 不写默认是development，会用warn警告但不会报错。
激动人心的时刻来了 执行 npm run dev 浏览器打来 localhost:8080
页面是否alert(1),,此时，一个webpack开发环境我们已经搭建好了。
如果想了解简单开发一个react jsx 请再耽误您几分钟时间
我们需要安装 react react-dom 俩个包。有兴趣的可以看一下我写的react源码入门，给个赞哦，么么哒
yarn add react react-dom --dev
我们还需要配置webpack支持我们编译jsx文件
//原来的编译js配置 添加一下jsx (为什么直接添加就可以，我们再babel里面配置了编译react，因此直接添加就可以了) //修改之前的
{
test:/\.js$/,
use:"babel-loader",
exclude:/node_modules/
},
//修改之后的
{
test:/\.(js|jsx)$/,
use:"babel-loader",
exclude:/node_modules/
},
修改一下我们的入口文件 在src/index.js中加入一些内容来添加主文件，在里面引入随便写的一个react组件。 //index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.jsx';
ReactDOM.render(<App />, document.getElementById('root'));
同级目录下创建一个app.jsx的文件 //app.jsx
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="App">
hello,webpack
</div>
);
}
}
export default App;
此时，重新执行一下 npm run dev， 打开浏览器 localhost:8080 是不是已经出现了内容，然后我们就可以进行我们需要的react开发了。
只有非常努力，才能看起来毫不费力
