优化webpack index.js -o dist/bundle.js 这一句其实是可以写在一个配置文件里
#### 1.**webpack.config.js**
```
const path = require('path');
module.exports = {
entry: path.join(__dirname, './index.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
}
}
```
#### 2.在package.json文件下
```
"scripts": {
"start": "webpack --config webpack.config.js"
}
```
#### 3.热加载
```
npm install webpack-dev-server -D
```
4.在package.json文件下
```
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js --open --port 3002 --hot"
}
// --open 自动打开浏览器
// --port 服务监听的端口 3002
// --hot 自动更新
```
5.小小修改index.html
```
<script src="./bundle.js"></script>或者<script src="/bundle.js"></script>
```
6.默认index.html
```
npm install html-webpack-plugin -D
```
7.在**webpack.config.js**
```
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, './index.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, './index.html'),
filename: 'index.html'
})
]
}
```
#### 注意
删掉index.html文件里面的bundle.js引用，因为html-webpack-plugin会自动把打包出来的bundle自动加到我们的index.html代码里
#### 8.在src文件夹下创建index.css并编写
```
body{
background: skyblue;
}
```
#### 9在index文件夹下引入
```
import $ from 'jquery'
$('ul li:even').css({background: 'gray'})
$('ul li:odd').css({background: 'green'})
import './index.css'
```
10.报错？
```
安装npm install css-loader style-loader -D
// css-loader的作用是将index.css文件解析为webpack能识别的模块，然后打包进bundle.js里面，
但是这样样式并未成功显示在浏览器中。
// style-loader的作用就是将打包到bundle.js中的样式绑定到浏览器上，以style标签的形式显示出来
```
11\. 在**webpack.config.js**
```
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, './index.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, './index.html'),
filename: 'index.html'
})
],
module: {
rules: [{
test: /.css$/,
use: ['style-loader', 'css-loader']
}]
}
}
```
```
补充：引入的文件是less
安装：npm install less-loader less -D
规则：
{
test: /.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
```
#### 12.ES6 转 ES5
npm install babel-core babel-loader@7.1.5 babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 -D
13在indxe.js下
```
class A {
}
function A() {}
```
#### 13配置loader，在webpack.config.js
```
{test:/\.js/,use:['babel-loader'],exclude:/node_modules/}
```
exclude表示排除掉 node\_modules下载的依赖项。这样可以加速网站开发，而且我们也只需要对我们的项目src
源文件进行编译即可。
#### 14.新增.babelrc文件
```
{
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}
```
npm run start(生产) 或者npm run dev（开发）
```
编译后
\n\n var Person = function Person() {\n (0, _classCallCheck3.default)(this, Pe
rson);\n};\n\nvar p = new Person();\n\n
```
至此关于webpack的基本配置已经到这里。
解释
**babel-present-env** 仅仅包括 babel-present-2015 、2016、2017，不包括：
**babel-stage-x** ，也不包括 babel-polyfill
**babel-present-env** 仅仅转换 新版的语法 如：箭头函数，并不转换新版api 如：Array.include转换新版
api及抹平浏览器之间的差异（兼容ie）需要 babel-polyfill
**babel-polyfill** 会污染全局，比较暴力。而 `babel-plugin-transfrom-runtime` 是哪里需要就给
哪里转换。
**babel-plugin-transform-runtime** 主要做了一下三件事：
当你使用 `generators/async` 函数时，自动引入 `babel-runtime/regenerator` （使用 regenerator
运行时而不会污染当前环境） 。
自动引入 `babel-runtime/core-js` 并映射 ES6 静态方法和内置插件（实现polyfill的功能且无全局污染，
但是实例方法无法正常使用，如 “foobar”.includes(“foo”) ） 。
移除内联的 Babel helper 并使用模块 `babel-runtime/helpers` 代替（提取babel转换语法的代
码）。
