###1 webpack基礎
webpack安裝步驟
npm init -y
npm webpack webpack-cli -D
### 以上生成 package.json 和 node_modules；增加src文件夾>index.js，設置package.json
"scripts": {
"build":"webpack --mode development", // mode production
}
### npm run build 打包出來 dist， -- mode production 會出來壓縮的js
### 增加webpack.config.js (一般放在項目根目錄下面) 來配置webpack
### 增加webpack.config.js （放在script下面，也該改個名字-->config.js）,需要在package.json設置；打包出來的文件目錄會有問題，需要設置webpcak的output的 path，保持正常的dist目錄結構，使用process.cwd()
package.json:
"scripts": {
"build":"webpack --mode development --config script/webpack.config.js",
},
webpack.config.js:
output:{
// path: path.resolve(__dirname,"dist"),
path: path.resolve(process.cwd(),"dist"),// 保持正常的dist目錄結構，使用process.cwd()
}
### 2.webpack的一些基礎插件 html-webpack-plugin
增加html-webpack-plugin 構建後在dist裏自動生成index.html
npm i --save-dev html-webpack-plugin
webpack.config.js:
const HtmlWebpackPlugins=require('html-webpack-plugin')
plugins:[
new HtmlWebpackPlugins()
]
###2.2 創建自己的模板html ，新建public文件夾，新建index.html
public>index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
webpack.config.js:
plugins:[
new HtmlWebpackPlugins({
title:'webpack',
template:'public/index.html'
})
]
### 3.webpack的loader
loader -->style-loader在html中運行時通過js會在header標籤中插入 <style></style>
npm install --save-dev style-loader css-loader
src>index.css
webpack.config.js:
module: {
rules:[
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
]
},
### loader -->mini-css-extract-plugin在dist文件夾中生成 css文件夾，在index.html的header標籤裏自動通過<link>引入css
extract-text-webpack-plugin（webpack3）-->mini-css-extract-plugin (webpack4)
npm install --save-dev mini-css-extract-plugin
或 npm i mini-css-extract-plugin -D
webpack.config.js: 'style-loader'--> MiniCssExtractPlugin.loader
module: {
rules:[
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
]
},
### npm cache clean --force (npm報莫名其妙的錯時，清除緩存)
### 4. devserver下outputFile不能用chunkHash，要用hash；原因是 開發環境的熱更新跟chunkHash有衝突的，二者只能取一,下面代碼寫了兼容，即開發環境時使用hash，生產環境使用chunkHash
npm install webpack-dev-server --save-dev ;
webpack.config.js：
const devMode = process.env.NODE_ENV !== 'production';
output:{
filename:devMode ? 'static/js/[name].[hash:8].js':'static/js/[name].[chunkHash:8].js'
},
package.json:
"dev": "webpack-dev-server --hot --mode development --config script/webpack.config.js --open chrome ",
### 5 less scss 使用loader; css less scss三者可共存
npm install less-loader less --save-dev
npm install sass-loader node-sass webpack --save-dev
webpack.config.js：
module: {
rules:[
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'， 'less-loader'],
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader','sass-loader'],
},
]
### 6 postcss-loader autoprefix 自動添加前綴，browserslist檢測之後 去加前綴
npm i postcss-loader autoprefixer -D
6.1 在根目錄下新建一個postcss.config.js:
plugins: [
require('autoprefixer')
]
webpack.config.js：
module: {
rules:[
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader'],
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader',less-loader','postcss-loader'],
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader','sass-loader','postcss-loader'],
},
]
爲了更好的兼容瀏覽器 ，在package.json 添加browserslist ，其api來源於can i use
package.json:
"browserslist": [
"last 8 version"
]
### 6.2 若要支持css Grid佈局
npm install autoprefixer@latest cross-env --save-dev
###6.3 圖片靜態資源 file-loader url-loader ,，但url-loader的功能更強，帶有file-loader的功能，一般使安裝url-loader即可
npm install file-loader --save-dev
webpack.config.js：
module: {
rules:[
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: 'static/images/[name].[ext]',
publicPath:'/',
},
},
],
},
]
npm install url-loader --save-dev
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 1024, //圖片<1024,使用base64，>1024使用拷貝圖片資源的方式 拷貝到指定文件夾
name: 'static/images/[name].[ext]',// 圖片＞1024 ,使用file-loader的options
publicPath:'/',// 圖片>1024使用file-loader的options
},
},
],
},
###6.4 copy-webpack-plugin <img>標籤引入圖片一般使採用copywebpackplugin拷貝圖片資源
npm install copy-webpack-plugin --save-dev
webpack.config.js:
const CopyPlugin = require('copy-webpack-plugin');
new CopyPlugin([
{ from: path.resolve(process.cwd(),'src/static/'), to: path.resolve(process.cwd(),'dist/static')},
]),
src>static>3.jpeg
public>index.html <img src="/static/3.jpeg" alt="採用copywebpackplugin">
###7. babel
npm install -D babel-loader @babel/core @babel/preset-env
webpack.config.js:
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
### 7.1 npm install -g bower 引入bower組件庫，比如引入jquery，根目錄下會自動生成bower_components文件夾，index.html 引入jquery 項目中即可使用jquery
npm install -g bower
bower install jquery -->bower_components>jquery
index.html：
<script src="bower_components/jquery/dist/jquery.min.js"></script>
###7.2 webpack-merge
var merge = require('webpack-merge');
webpack.config.js:分解成以下文件
webpack.config.prod.js
webpack.config.dev.js
webpack.config.base.js
var webpackConfig=merge(baseConfig,devConfig,prodConfig)
package.json:
"build": "webpack --config script/webpack.config.prod.js",
"dev": "webpack-dev-server --hot --config script/webpack.config.dev.js --open chrome ",