Webpack搭建ES6開發環境
1、什麼是Webpack
webpack 解決什麼問題？
Webpack 可以做到按需載入。像 Grunt、Gulp 這類構建工具，打包的思路是：遍歷原始檔→匹配規則→打包，這個過程中做不到按需載入，即對於打包起來的資源，到底頁面用不用，打包過程中是不關心的。
Webpack 跟其他構建工具本質上不同之處在於：Webpack 是從入口檔案開始，經過模組依賴載入、分析和打包三個流程完成專案的構建code split（拆分公共程式碼等）。
當然，Webpack 還可以輕鬆的解決傳統構建工具解決的問題：
-
模組化打包，一切皆模組，JS 是模組，CSS 等也是模組；
-
語法糖轉換：比如 ES6 轉 ES5、TypeScript；
-
前處理器編譯：比如 Less、Sass 等；
-
專案優化：比如壓縮、CDN；
-
解決方案封裝：通過強大的 Loader 和外掛機制，可以完成解決方案的封裝，比如 PWA；
-
流程對接：比如測試流程、語法檢測等。
2、為什麼要使用 webpack ？
-
解耦需要：
-
使用SPA（Single-page Application，單頁面應用）開發大型專案時，解決模組之間的解耦和維護問題；
-
-
前端工程化需要：
-
前端開發逐漸向工程化演進，理解前端框架的專案構建的流程（如React、Vue、Angular）；
-
-
專案擴充套件需要：
-
理解Webpack核心概念（如Babel載入器、Plugin外掛），便於專案協同開發與專案整合；
-
-
面試需要：
-
進入一線網際網路公司的必備技能；
-
3、Webpack搭建ES6開發環境步驟
首先要有node環境，進入Node.js的官網，選擇對應系統下載安裝包。安裝node後集成了npm管理器
設定預設
npm使用淘寶映象
npm config set registry https://registry.npm.taobao.org
安裝
cnpm包，安裝成功後npm命令更換為cnpm命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
## 安裝成功之後，直接像使用npm一樣使用cnpm即可，例如：安裝某個包就變成了
cnpm i packageName
設定環境變數
建立專案資料夾，以 myapp 檔案為例，該檔案即為專案根目錄。開啟命令提示符，執行：
cd myapp
依次完成以下操作：
第一步 安裝模組
建立package.json檔案
# 手動配置
npm init
# 自動配置
npm init -y
安裝webpack工具
# 安裝webpack和webpack-cli
cnpm install webpack webpack-cli --save-dev
安裝babel相關
# 安裝 babel和react相關載入器
cnpm i babel-loader @babel/core @babel/preset-env -D
安裝css載入器
cnpm i css-loader style-loader -D
安裝HTML外掛
cnpm i html-webpack-plugin -D
PS：【依賴安裝到 開發環境與生產環境的區別】
開發環境，即專案的編碼階段需要的依賴，上線後不需要引用，例如：webpack構建工具、babel載入器等，使用
--save-dev或-D命令安裝；生產環境，專案上線後開始正式提供對外服務的階段仍然需要依賴支援，例如：jQuery庫、路由等，使用
--save或-S命令安裝；
第二步 建立目錄結構
專案的目錄結構為：
myapp
-- public [靜態資原始檔目錄]
-- src [ 專案原始檔目錄 ]
-- dist [ 打包檔案目錄 ]
-- webpack.config.js [ webpack配置檔案 ]
-- package.json [ NPM包管理配置檔案 ]
-- node_modules [ 專案中的依賴存放目錄 ]
在public目錄下，建立index.html，該檔案為專案的預設首頁
在src目錄下，建立index.js，該檔案為專案的入口檔案，在此檔案中可以編寫ES6程式碼
[1,2,3,4,5].map(item=> console.log(item))
在專案的根目錄下建立webpack.config.js配置檔案，依次完成以下配置：
（1）配置入口（entry）
module.exports = {
entry:'./src/index.js'
}
（2）配置出口（output）
const path = require('path');
module.exports = {
// ...
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
}
}
（3）配置載入器（loader）
module.exports = {
// ...
module:{
rules:[
{
test: /\.css$/,
use:['style-loader','css-loader']
},
{
test: /\.js?$/, // jsx/js檔案的正則
exclude: /node_modules/, // 排除 node_modules 資料夾
use:{
// loader 是 babel
loader: 'babel-loader',
options: {
// babel 轉義的配置選項
babelrc: false,
presets: [
[require.resolve('@babel/preset-env'), {modules: false}]
],
cacheDirectory: true
}
}
}
]
}
}
（4）配置外掛（plugin）
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins:[
new HtmlWebPackPlugin({
template: 'public/index.html',
filename: 'index.html',
inject: true
})
]
}
執行打包命令
npx webpack --mode development
配置 npm run build 命令執行打包操作：
//在 package.json 檔案新增 build 項
{
"scripts": {
"build": "webpack --mode production"
}
}
執行打包命令：
npm run build
第三步 搭建本地服務
安裝依賴
cnpm i webpack-dev-server -D
在webpack.config.js檔案中配置本地服務相關資訊
module.exports = {
// ...
devServer: {
contentBase: './dist',
host: 'localhost',
port: 3000
}
}
在package.json檔案中配置啟動命令
{
"scripts": {
"start": "webpack-dev-server --mode development --open"
}
}
執行啟動服務命令
npm start