webpack環境配置
webpack基礎
webpack是一款強大的模組載入器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模組來使用和處理。官網
接下來我們將一步步熟悉Webpack的使用，並使用它來搭建一套前端工作流。
初始化專案
建立一個專案
$ mkdir webpack-demos && cd webpack-demos
$ git init
$ touch README.md .gitignore
$ npm init編輯.gitignore
node_modules
*.log*
.idea建立src和build兩個目錄
// src 目錄存放原始碼，build 目錄存放編譯打包之後的資源
$ mkdir src build
$ cd src && touch index.js component.js
$ cd ../ && touch index.htmlsrc/index.js
var component = require('./component.js');
component();src/component.js
module.exports = function(){
alert('component');
}index.html
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Webpack demos</title></head><body>
<div id="app"></div>
<script src="./build/bundle.js"></script></body></html>
下載webpack和webpack-dev-server
安裝並儲存在專案的依賴中
$ npm install –save-dev webpack webpack-dev-server
如果想直接在命令列使用webpack或webpack-dev-server命令，請全域性安裝
$ npm install -g webpack webpack-dev-server
建立webpack的配置檔案
$ touch webpack.config.js
請注意webpack.config.js這個檔案命名，預設情況下需要嚴格按照這個命名，不然會報Output filename not configured的錯誤；另外，如果不按這個命名，那麼在webpack執行的時候通過–conf這個引數指定配置檔案，比如：webpack –config conf.js
進行基本配置
var path = require(‘path’);
module.exports = {
entry: path.resolve(__dirname, ‘src/index.js’),
output: {
path: path.resolve(__dirname, ‘build’),
filename: ‘bundle.js’
},
};
執行webpack命令,這裡我們用的是專案內安裝的webpack
$ ./node_modules/.bin/webpack
可以看到控制檯出現如下資訊：
Hash: cf7cc9272c664f542fcb
Version: webpack 1.13.0
Time: 80ms
Asset Size Chunks Chunk Names
bundle.js 2.04 kB 0 [emitted] main
[0] ./src/index.js 60 bytes {0} [built]
[1] ./src/component.js 57 bytes {0} [built]
2.webpack和webpack-dev-server的基本命令
$ webpack –help
執行以上命令，可以在控制檯看到很多webpack相關的命令，選取幾個常用的介紹下。
- webpack 開發環境下編譯
- webpack -p 產品編譯及壓縮
- webpack –watch 開發環境下持續的監聽檔案變動來進行編譯(非常快!)
- webpack -d 引入 source maps
- webpack –progress 顯示構建進度
- webpack –display-error-details 這個很有用，顯示打包過程中的出錯資訊
- webpack –profile 輸出效能資料，可以看到每一步的耗時
另外，讓我們使用webpack-dev-server來起一個本地服務進行除錯,這裡任然用的是專案內部的webpack-dev-server
$ ./node_modules/.bin/webpack-dev-server –progress –colors
修改我們的index.html程式碼
開啟localhost:8080，回車即可。
那麼執行webpack-dev-server後面的幾個引數是什麼意思呢？
- webpack-dev-server - 在 localhost:8080 建立一個 Web 伺服器
- webpack-dev-server –devtool eval - 為你的程式碼建立源地址。當有任何報錯的時候可以讓你更加精確地定位到檔案和行號
- webpack-dev-server –progress - 顯示合併程式碼進度
- webpack-dev-server –colors - 命令列中顯示顏色
- webpack-dev-server –content-base build - webpack-dev-server服務會預設以當前目錄伺服檔案，如果設定了content-base的話，服務的根路徑則為build目錄
- webpack-dev-server –inline 可以自動加上dev-server的管理程式碼，實現熱更新
- webpack-dev-server –hot 開啟程式碼熱替換，可以加上HotModuleReplacementPlugin
- webpack-dev-server –port 3000 設定服務埠
關於webpack-dev-server的簡單介紹：webpack-dev-server是一個小型的node.js Express伺服器,它使用webpack-dev-middleware中介軟體來為通過webpack打包生成的資原始檔提供Web服務。它還有一個通過Socket.IO連線著webpack-dev-server伺服器的小型執行時程式。webpack-dev-server傳送關於編譯狀態的訊息到客戶端，客戶端根據訊息作出響應。
3.devServer
剛才我們看到，在執行webpack-dev-server的時候，後面帶了一串引數，這裡我們可以使用devServer欄位統一在webpack.config.js檔案裡面維護。
webpack.config.js
var path = require(‘path’);
module.exports = {
entry: path.resolve(__dirname, ‘src/index.js’),
output: {
path: path.resolve(__dirname, ‘build’),
filename: ‘bundle.js’,
},
devServer: {
publicPath: “/static/”,
stats: { colors: true },
port: 3000,
inline: true
}
};
同時，我們可以簡化scripts欄位的配置了
“scripts”: {
“dev”: “./node_modules/.bin/webpack-dev-server”
}
對應的修改index.html檔案中的資源引用地址
ok, npm run dev即可
4.devtool
我們在配置中新增devtool欄位，並設定值為source-map，這樣我們就可以在瀏覽器中直接除錯我們的原始碼，在控制檯的sources下，點開可以看到webpack://目錄，點開有驚喜哦。
程式碼清單：webpack.config.js
devtool: ‘cheap-module-source-map’
devtool可以有幾個配置項：
devtool build speed rebuild speed production supported quality
eval +++ +++ no generated code
cheap-eval-source-map + ++ no transformed code (lines only)
cheap-source-map + o yes transformed code (lines only)
cheap-module-eval-source-map o ++ no original source (lines only)
cheap-module-source-map o - yes original source (lines only)
eval-source-map – + no original source
source-map – – yes original source
5.多檔案入口
$ cd src && touch entry1.js entry2.js
webpack.config.js
var path = require(‘path’);
module.exports = {
entry: {
entry1: ‘./src/entry1.js’,
entry2: ‘./src/entry2.js’,
},
output: {
path: path.resolve(__dirname, ‘build’),
filename: ‘[name].js’
},
};
6.resolve解析
resolve下常用的是extension和alias欄位的配置：
- extension 不用在require或是import的時候加檔案字尾
/* webpack.config.js */
resolve: {
extensions: [“”, “.js”, “.jsx”],
},
- var component = require(‘./component.js’);
+ var component = require(‘./component’);
alias 配置別名，加快webpack構建的速度
每當引入jquery模組的時候，它會直接引入jqueryPath,而不需要從node_modules資料夾中按模組的查詢規則查詢,不需要webpack去解析jquery.js檔案
先安裝jQuery
$ npm install jquery –save
修改 webpack.config.js
resolve: {
extensions: [“”,”.js”,”.css”,”.json”],
alias: {
‘jquery’: jqueryPath
}
},
7.使用Babel-loader來解析es6和jsx
我們在src/index.js裡面嘗試寫一個最基本的元件程式碼，暫時不用理會程式碼為什麼要這麼寫，這裡先把ES6語法和JSX語法加進來，用於跑通我們的開發環境，後續會有專題內容來詳細講述。
程式碼清單：src/index.js
‘use strict’;
import React, { Component } from ‘react’;
import ReactDOM from ‘react-dom’;
class HelloWorld extends Component {
render(){
return (
)
}
}
ReactDOM.render(, document.getElementById(‘app’));
ok，我們看到，我們的程式碼用到了基本的react.js和react-dom.js，而且使用的是ES6的語法來封裝的元件和應用模組。
所以接下來我們要做兩件事：
1.下載相應的模組：
$ npm install –save react react-dom
2.
3.下載並配置babel，以解析ES6語法和JSX語法。
babel是一款強大的解析器，擁有活躍而且完善的生態，不僅可以做JS相關的各種語法的解析，還提供豐富的外掛功能。
$ npm install babel-loader babel-core –save-dev
安裝後我們需要配置webapck.config.js檔案
程式碼清單：webpack.config.js
var path = require(‘path’);
module.exports = {
entry: path.resolve(__dirname, ‘src/index.js’),
output: {
path: path.resolve(__dirname, ‘build’),
filename: ‘bundle.js’,
},
module: {
loaders: [
{
test: /.js$/,
loader: ‘babel-loader’
}
]
}
};
這裡指定了使用babel-loader來解析js檔案，但是並沒有告訴babel應該如何來解析，所以我們需要建立一個babelrc配置檔案
$ touch .babelrc
然後編輯babelrc 程式碼清單：.babelrc
{
“presets”: [“es2015”, “react”, “stage-0”],
“plugins”: []
}
為什麼配置的是這兩個引數，解釋一下，配置的preset欄位是在為babel解析做預設，告訴babel需要使用相關的預設外掛來解析程式碼，plugins欄位，顧名思義，就是用來配置使用babel相關的外掛的，這裡暫且不裝。
這裡使用到了三個預設需要下載安裝
$ npm install –save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-0
// 其中stage-0預設是用來說明解析ES7其中一個階段語法提案的轉碼規則
好了，開始執行試一下吧
$ npm run dev
8.解析樣式檔案
style-loader css-loader less-loader
前面的大部分工作都在處理JS邏輯的解析和載入，但是我們還一直沒有提我們的樣式檔案應該如何去處理。
我們在課程中暫且約定使用less前處理器（saas的類似）來寫我們專案的樣式，那麼首先需要下載幾個webpack的loader
$ npm install –save-dev style-loader css-loader less-loader
進行webpack配置。 程式碼清單：webpack.config.js
loaders: [
{
test: /.js$/,
loaders: [‘react-hot’, ‘babel’],
exclude: path.resolve(__dirname, ‘node_modules’)
},
{
test: /.css/,
loader: ‘style!css’
},
{
test: /.less/,
loader: ‘style!css!less’
}
]
9.圖片載入
{
test: /.(jpe?g|png)$/,
loader: ‘file-loader’
}
10.圖示字型等資源
圖示字型的載入可以選擇file-loader 或 url-loader 進行載入，配置如下（示例配置，大家在專案中最好還是按實際情況配置）
{
test: /.(woff|woff2|ttf|svg|eot)(\?v=\d+.\d+.\d+)?$/,
loader: “url?limit=10000”
}