前段自動化工具webpack

一，webpack基礎
學習網站：https://www.webpackjs.com/
簡介：
本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。
1，兩種安裝方式
webpack 的安裝依賴 nodejs 的npm，安裝完node.js，可使用npm，可是npm安裝速度表較慢，因此能夠安裝淘寶的國內npm源 cnpm：
npm i -g cnpm --registry=https://registry.npm.taobao.org
1）全局安裝
命令：cnpm i -g webpack
i:install -g:--global
能夠在全局狀態下（任何文件夾）使用webpack
注意：不推薦全局安裝，全局安裝會鎖定版本，若是在使用不一樣webpack 版本的項目中，可能會致使構建失敗
2)本地安裝
當前最新版本應該是 4.20.2
本地安裝 就是講webpack 安裝到特定的文件夾內，那麼咱們就只能在當前文件夾使用，其餘文件夾不能使用
本地安裝命令：
安裝最新穩定版本：cnpm i --save-dev webpack
安裝特定版本：cnpm i --save-dev webpack@<version>
eg:cnpm i --save-dev webpack@4.16.1
若是你安裝的是 webpack4.0 + 的版本，還須要安裝webpack-cli
cnpm i --save-dev webpack-cli
對於大多數項目，推薦本地安裝，當體驗如依賴時，更容易分別升級項目
當咱們進行了本地安裝，咱們能夠在 node_module/.bin/webpack 文件夾中訪問
3)package.json
當前項目（當前文件夾下）安裝的全部依賴配置文件，另外能夠設置腳本執行依賴（vue），當node_modules 全部依賴被刪除，可使用該文件從新下載全部依賴：cnpm i
下載依賴時使用：--save-dev 便可將當前下載的依賴寫進package.json
package.json 可使用npm生成：npm init
一路回車便可
二，webpack 打包教程
1，建立項目
建立項目目錄，初始化項目 npm init 生成文件package.json，安裝webpack webpack-cli 命令以下：
mkdir webpack-demo1
cd webpack-demo1
npm init -y
cnpm i --save-dev webpack webpack-cli jquery@1.12.3
當前項目目錄：
webpack-demo1
|-package.json
|-/node_modules
+ |-index.html
+ |-/src
+ |-index.js
解構說明：
index.html 是項目主入口文件，index.js 是主入口打包文件，全部與index.js 相關的依賴都會被打包
2,引入依賴（打一個包）
項目目錄：
webpack-demo1
|-package.json
|-/node_modules
+ |-/dist
+ |-index.html
- |-index.html
+ |-/src
+ |-index.js
dist:項目真正文件夾，放置打包後的全部內容
使用npm 安裝的內容都放在node_modules 文件夾中，在js中使用時 使用require 引入
打包使用webpack-cli：npx webpack
npx webpack 命令打包時，默認以src文件夾中index.js 爲入口，打包後默認以dist文件夾中的main.js 爲打包結果
3，打包配置文件
webpack4 之後的版本，不須要配置文件能夠默認打包，可是不少項目比較複雜，須要在配置文件中設置不少內容，相比終端輸入大量命令更加高效，因此咱們能夠建立一個可以取代cli打包的配置文件
項目目錄：
webpack-demo1
|-package.json
|-/node_modules
+ |-/dist
+ |-index.html
+ |-/src
+ |-index.js
+ |-webpack.config.js
配置文件基本內容：
const path = require('path'); //系統自帶path模塊
module.exports = {
// 配置打包的入口js文件
entry: './src/index.js',
// 配置打包後的文件及文件位置
output: {
filename: "bundle.min.js",
// __dirname 當前文件夾路徑
path: path.resolve(__dirname, 'dist')
},
watch: true//打包監聽狀態，一旦index.js 文件中內容變化，保存，當即從新打包
}

使用打包配置文件打包：
npx webpack --config webpack.config.js
4,npm 腳本 （npm script）
目前沒有腳本的狀況下，打包使用：npx webpack --config webpack.config.js
咱們以爲很麻煩，因此咱們可使用npm 腳本進行打包：
在package.json中，找到scripts ，添加腳本：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build_w": "webpack",
"build":"webpack --config webpack.config.js"
}

5，打包css文件
建立css文件，myStyle.css
想要打包css，首先須要webpack對css的樣式表支持：
命令：
cnpm i --save-dev css-loader style-loader
mac：加sudo cnpm ...
css-loader:遍歷樣式表，若是發現有import導入css的文件，就將css文件引入進來
style-loader:將樣式經過style 標籤 直接插入到文檔的頭部
1）第一種方式
在index.js中引入語法：
require('!style-loader!css-loader!../css/myStyle.css');

從新打包
2）第二種方式
手動配置打包依賴，在webpack.config.js 中添加：
const path = require('path'); //系統自帶path模塊
module.exports = {
// 配置打包的入口js文件
entry: './src/index.js',
// 配置打包後的文件及文件位置
output: {
filename: "bundle.min.js",
// __dirname 當前文件夾路徑
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
// 配置css-loader和style-loader
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
watch: true //打包監聽狀態，一旦index.js 文件中內容變化，保存，當即從新打包
}

而後在index.js 文件中：
import './style.css';
從新打包
6，打包圖片
使用file-loader 能夠輕鬆的將圖片打包加入到js和css 中
命令：
cnpm i --save-dev file-loader
進入webpack.config.js 中，在rules中添加：
{
// 配置圖片加載
test: /\.(png|svg|jpg|jpeg|gif)$/,
use: ['file-loader']
}

在相關的css中就能夠引入圖片
進入index.js 中也能夠引入圖片：
import fan from './開飯了.jpeg';
img.src = fan;
注：css或js 一旦被打包，其中引入的圖片也會被打包到dist文件夾，文件沒有壓縮，可是文件名改了
7,打包字體圖標
使用 file-loader
進入webpack.config.js 中，在rules中添加：
{
// 字體圖標文件打包配置
test: /\.(eot|woff|woff2|ttf|svg)$/,
use: ['file-loader']
}

8，加載數據文件（json）
json,xml,csv,tsc...
json 文件默認是支持的，不須要插件
import data from './json.json';
安裝xml-loader 和 csv-loader
cnpm i --save-dev xml-loader csv-loader
進入webpack.config.js 中，在rules中添加：
{
// xml打包設置
test: /\.xml$/,
use: ['xml-loader']
},
{
// csv,tsv打包設置
test: /\.(csv|tsv)$/,
use: ['csv-loader']
}

xml使用：
import xml from './xml.xml';
9,模塊依賴打包
打包文件載入依賴文件（若是打包的文件引入了其餘模塊，則會將其餘模塊一併打包）：
require()
eg：var $ = require('jquery');
require('!style-loader!css-loader!../css/myStyle.css');
建立依賴模塊：
1）建立一個js文件 data.js
這個js文件就是一個模塊
var json = {
str:"我是data模塊中的數據"
}
module.exports = json;
2）在index.js 中引入模塊
var d = require('./data.js');
建立一個函數塊，在index.js中引入該模塊，調用模塊中的函數，傳入本身的名字，輸出 xxx你好,歡迎進入
三，打包處理
1，打包輸出管理
index.html 根據項目的需求可能須要引入多個功能模塊，那麼主程序引入多個bundle包，因此咱們須要對多個功能模塊進行打包，並引入
2，多個功能模塊同時打包
建立功能模塊 print.js
同時打包index.js 和 print.js
entry: {
index: './src/index.js',
print: './src/print.js',
alert: './src/alert.js'
},

index: './src/index.js',
// 配置打包後的文件及文件位置
output: {
filename: "[name].bundle.min.js",
// __dirname 當前文件夾路徑
path: path.resolve(__dirname, 'dist')
},

npm run build
3,自動更新打包
watch:true 能夠監聽打包
自動打包插件能夠作到自動打包，還能夠作到自動修改inde.html 中引入的bundle包，不能監聽
安裝插件：
cnpm i --save-dev html-webpack-plugin
進入webpack.config.js 中配置：
0 const HtmlWebpackPlugin = require('html-webpack-plugin');
...
module:{},
plugins: [
new HtmlWebpackPlugin({
title: '輸出管理'
})
]

npm run build 便可生效
做用：
將打包的內容自動引入進index.html，而且根據打包名稱的改動改變index.html 的內容，會影響咱們本身寫的內容，因此不建議使用
4，自動清理dist文件夾
將沒有用的bundle包清理掉
下載插件：
cnpm i --save-dev clean-webpack-plugin
進入webpack.config.js 文件修改：
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
...
module:{},
plugins: [
new CleanWebpackPlugin(), //自動清理dist文件夾
]

此插件會將非打包內容所有刪除，包括html文件，不建議使用
npm run build 啓動
5，打包內容錯誤定位 source map
bundle 包會主動將文件以及依賴的文件打包在一塊兒，而且對代碼進行壓縮（變成一行）和混淆（變量和內容更換），若是代碼中有錯誤，那麼瀏覽器報錯以後能找到的就只有一行代碼，沒法定位錯誤位置
js自帶功能：inline-source-map
注意：此功能僅僅用於開發環境的解釋說明，不可用於生產環境
進入webpack.config.js 添加：
module.exports = {
...,
devtool:"inline-source-map"
}

npm run build
6,觀察者模式自動構建打包
watch
使用npm run build 打包，每次當內容變化都要從新打包，可使用watch 進行打包監聽，有兩種方案：
1）在webpack.config.js 中設置
module.exports={
...,
watch:true
}

打包監聽狀態，一旦index.js 文件中內容變化，保存，當即從新打包
2)在package.json 中添加腳本
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build_w": "webpack",
"build": "webpack --config webpack.config.js",
+ "watch": "webpack --watch"
},

npm run watch
研究題：瀏覽跟隨代碼變化自動刷新
7，webpack 自帶的簡單本地服務器 webpack-dev-server
做用：實現實時重載，實時打包，自動打開瀏覽器，瀏覽內容自動更新
下載插件：
cnpm i --save-dev webpack-dev-server
進入webpack.config.js 中配置：
module.exports = {
...,
devServer: {
contentBase: './dist', //根目錄
port: 8888 //端口號
}
}

進入package.json 添加腳本：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build_w": "webpack",
"build": "webpack --config webpack.config.js",
"watch": "webpack --watch",
+ "server": "webpack-dev-server --open"
},

npm run server 啓動本地服務器