優化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轉換語法的代
碼）。
