注意：接上一篇文章《一、webpack4.0基礎篇》
六、轉化es6文法
本節來看一下，怎麼在webpack中處理js子產品。
我們需要把ES6轉換成ES5文法。
安裝：
npm install babel-loader @babel/core @babel/preset-env -D
@babel/preset-env就是用來把ES6轉換成ES5文法的。
src/index.js:
let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
require('./index.styl')
// ES6文法
let fn = () => {
console.log('log') // log
}
fn()
在webpack.config.js中進行配置：
// webpack是node寫出來的 node的寫法
//path是node的内置子產品，是以不需要去安裝
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 對單獨抽離出來的css檔案進行壓縮。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 對生成的bundle.js檔案進行壓縮。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// 對單獨抽離出來的main.css進行壓縮時，
// 使用到了optimize-css-assets-webpack-plugin插件
// 是以需要加一個優化項配置
optimization: {
minimizer: [
// 對生成的bundle.js進行壓縮
new UglifyJsPlugin({
cache: true,
// 并發打包，一起壓縮多個。
parallel: true,
sourceMap: true
}),
// 對抽離出來的main.css進行壓縮
new OptimizeCSSAssetsPlugin({})
]
},
devServer: { // 開發伺服器的配置
port: 3000,
progress: true, // 編譯的進度條
contentBase: './dist', // 以dist目錄為預設啟動目錄
compress: true, // 自動壓縮
open: true // 自動打開浏覽器，适合懶人
},
// 模式：預設有兩種，一種叫生産環境production， 一種叫 development
// production 是經過壓縮過的
// 是以，我們選擇 development模式，可以看清打包後的代碼
mode: 'production',
entry: './src/index.js', // 入口檔案，也就是打包這個js檔案
// 打包的檔案位置
output: {
// 當js檔案更改， [hash]的值會變化，每次build會生成一個新的js檔案
// [hash:8]，隻顯示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出來當然檔案名叫 bundle.js
// resolve() 可以把相對路徑解析成絕對路徑
// __dirname 是目前目錄
path: path.resolve(__dirname, 'dist'), // 路徑必須是一個絕對路徑
},
// 數組 放着所有的webpack插件
plugins: [
// 因為HtmlWebpackPlugin是一個類，是以使用的時候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪個html模闆
filename: 'index.html', // 打包後也叫做 index.html
// 壓縮這個html檔案(主要是對HTML檔案進行壓縮)
minify: {
// 删除這個html檔案的雙引号
removeAttributeQuotes: true,
// 變成一行
collapseWhitespace: true
},
// 加一個hash戳
hash: true
}),
new MiniCssExtractPlugin({
// 抽離出來的檔案叫 main.css
filename: 'main.css',
})
],
module: { // 子產品
rules: [
{
// 找到所有的js檔案
test: /\.js$/,
use: {
loader: 'babel-loader',
// 用babel-loader，需要把ES6轉換成ES5文法
options: {
presets: [
// @babel/preset-env 就是用來将ES6轉化成ES5文法的
'@babel/preset-env'
]
}
}
},
// 規則,需要css-loader， 可以處理css檔案
// css-loader 主要用來解析 @import這種文法的
// 還需要style-loader，它是把css插入到head的标簽中
// loader的用法， 多個loader需要一個數組
// loader是有順序的，預設是從右向左執行
// loader還可以寫成 對象方式
{
test: /\.css$/,
use: [
// 把樣式都抽離成一個單獨的css檔案，叫main.css
MiniCssExtractPlugin.loader,
// 給CSS3文法，比如transfrom加上字首。
// 需要建立 postcss.config.js 配置檔案
// 需要引用 autoprefixer 這個插件
'css-loader',
'postcss-loader'
]
},
// 還可以處理less檔案
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'less-loader' // 把less轉變為css
]
},
// 還可能處理 sass stylus,
// sass 要安裝的包 node-sass sass-loader
// stylus 要安裝的包 stylus stylus-loader
{
// 找到所有的scss檔案
test: /\.scss$/,
// 用的loader統一是sass-loader,sass和scss用的都是sass-loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'sass-loader' // 把scss轉變為css
]
},
{
// 找到所有的.styl檔案
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'stylus-loader' // 把stylus轉變為css
]
}
]
}
}
運作：
npm run dev
浏覽器成功列印出 'log'。
七、處理js文法及校驗
1、将ES7的文法(ES7中的類)轉換成ES5文法
需要用到 @babel/plugin-proposal-class-properties 這個插件。
安裝：
npm install @babel/plugin-proposal-class-properties -D
在 webpack.config.js中進行配置：
// webpack是node寫出來的 node的寫法
//path是node的内置子產品，是以不需要去安裝
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 對單獨抽離出來的css檔案進行壓縮。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 對生成的bundle.js檔案進行壓縮。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// 對單獨抽離出來的main.css進行壓縮時，
// 使用到了optimize-css-assets-webpack-plugin插件
// 是以需要加一個優化項配置
optimization: {
minimizer: [
// 對生成的bundle.js進行壓縮
new UglifyJsPlugin({
cache: true,
// 并發打包，一起壓縮多個。
parallel: true,
sourceMap: true
}),
// 對抽離出來的main.css進行壓縮
new OptimizeCSSAssetsPlugin({})
]
},
devServer: { // 開發伺服器的配置
port: 3000,
progress: true, // 編譯的進度條
contentBase: './dist', // 以dist目錄為預設啟動目錄
compress: true, // 自動壓縮
open: true // 自動打開浏覽器，适合懶人
},
// 模式：預設有兩種，一種叫生産環境production， 一種叫 development
// production 是經過壓縮過的
// 是以，我們選擇 development模式，可以看清打包後的代碼
mode: 'production',
entry: './src/index.js', // 入口檔案，也就是打包這個js檔案
// 打包的檔案位置
output: {
// 當js檔案更改， [hash]的值會變化，每次build會生成一個新的js檔案
// [hash:8]，隻顯示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出來當然檔案名叫 bundle.js
// resolve() 可以把相對路徑解析成絕對路徑
// __dirname 是目前目錄
path: path.resolve(__dirname, 'dist'), // 路徑必須是一個絕對路徑
},
// 數組 放着所有的webpack插件
plugins: [
// 因為HtmlWebpackPlugin是一個類，是以使用的時候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪個html模闆
filename: 'index.html', // 打包後也叫做 index.html
// 壓縮這個html檔案(主要是對HTML檔案進行壓縮)
minify: {
// 删除這個html檔案的雙引号
removeAttributeQuotes: true,
// 變成一行
collapseWhitespace: true
},
// 加一個hash戳
hash: true
}),
new MiniCssExtractPlugin({
// 抽離出來的檔案叫 main.css
filename: 'main.css',
})
],
module: { // 子產品
rules: [
{
// 找到所有的js檔案
test: /\.js$/,
use: {
loader: 'babel-loader',
// 用babel-loader，需要把ES6轉換成ES5文法
options: {
// 這是一個大插件的集合
presets: [
// @babel/preset-env 就是用來将ES6轉化成ES5文法的
'@babel/preset-env'
],
// 我們還需要配置一些小插件
plugins: [
// 将ES7文法轉換成ES5文法
'@babel/plugin-proposal-class-properties'
]
}
}
},
// 規則,需要css-loader， 可以處理css檔案
// css-loader 主要用來解析 @import這種文法的
// 還需要style-loader，它是把css插入到head的标簽中
// loader的用法， 多個loader需要一個數組
// loader是有順序的，預設是從右向左執行
// loader還可以寫成 對象方式
{
test: /\.css$/,
use: [
// 把樣式都抽離成一個單獨的css檔案，叫main.css
MiniCssExtractPlugin.loader,
// 給CSS3文法，比如transfrom加上字首。
// 需要建立 postcss.config.js 配置檔案
// 需要引用 autoprefixer 這個插件
'css-loader',
'postcss-loader'
]
},
// 還可以處理less檔案
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'less-loader' // 把less轉變為css
]
},
// 還可能處理 sass stylus,
// sass 要安裝的包 node-sass sass-loader
// stylus 要安裝的包 stylus stylus-loader
{
// 找到所有的scss檔案
test: /\.scss$/,
// 用的loader統一是sass-loader,sass和scss用的都是sass-loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'sass-loader' // 把scss轉變為css
]
},
{
// 找到所有的.styl檔案
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'stylus-loader' // 把stylus轉變為css
]
}
]
}
}
src/index.js:
let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
require('./index.styl')
// ES6文法
let fn = () => {
console.log('log')
}
fn()
// 這是ES7的文法
// 需要使用到 @babel/plugin-proposal-class-properties 這個插件
class A {
a = 1;
}
let a = new A()
console.log(a.a) // 1
運作：
npm run dev
浏覽器成功列印出：1
2、将ES7中的類的裝飾器，轉換成ES5文法
ES7的類 需要使用到 @babel/plugin-proposal-class-properties 這個插件
而類的裝飾器 需要用到 @babel/plugin-proposal-decorators 這個插件
先使用 @babel/plugin-proposal-decorators，然後再使用 @babel/plugin-prosopal-class-properties
安裝：
npm install @babel/plugin-proposal-decorators -D
在src/index.js中寫類的裝飾器：
let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
require('./index.styl')
// ES6文法
let fn = () => {
console.log('log')
}
fn()
// 這是ES7的文法
// ES7的類 需要使用到 @babel/plugin-proposal-class-properties 這個插件
// 而類的裝飾器 需要用到 @babel/plugin-proposal-decorators 這個插件
@log // 類的裝飾器
class A {
a = 1;
}
let a = new A()
console.log(a.a) // 1
function log (target) {
console.log(target, '23')
}
在webpack.config.js中進行配置：
// webpack是node寫出來的 node的寫法
// path是node的内置子產品，是以不需要去安裝
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 對單獨抽離出來的css檔案進行壓縮。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 對生成的bundle.js檔案進行壓縮。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// 對單獨抽離出來的main.css進行壓縮時，
// 使用到了optimize-css-assets-webpack-plugin插件
// 是以需要加一個優化項配置
optimization: {
minimizer: [
// 對生成的bundle.js進行壓縮
new UglifyJsPlugin({
cache: true,
// 并發打包，一起壓縮多個。
parallel: true,
sourceMap: true
}),
// 對抽離出來的main.css進行壓縮
new OptimizeCSSAssetsPlugin({})
]
},
devServer: { // 開發伺服器的配置
port: 3000,
progress: true, // 編譯的進度條
contentBase: './dist', // 以dist目錄為預設啟動目錄
compress: true, // 自動壓縮
open: true // 自動打開浏覽器，适合懶人
},
// 模式：預設有兩種，一種叫生産環境production， 一種叫 development
// production 是經過壓縮過的
// 是以，我們選擇 development模式，可以看清打包後的代碼
mode: 'production',
entry: './src/index.js', // 入口檔案，也就是打包這個js檔案
// 打包的檔案位置
output: {
// 當js檔案更改， [hash]的值會變化，每次build會生成一個新的js檔案
// [hash:8]，隻顯示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出來當然檔案名叫 bundle.js
// resolve() 可以把相對路徑解析成絕對路徑
// __dirname 是目前目錄
path: path.resolve(__dirname, 'dist') // 路徑必須是一個絕對路徑
},
// 數組 放着所有的webpack插件
plugins: [
// 因為HtmlWebpackPlugin是一個類，是以使用的時候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪個html模闆
filename: 'index.html', // 打包後也叫做 index.html
// 壓縮這個html檔案(主要是對HTML檔案進行壓縮)
minify: {
// 删除這個html檔案的雙引号
removeAttributeQuotes: true,
// 變成一行
collapseWhitespace: true
},
// 加一個hash戳
hash: true
}),
new MiniCssExtractPlugin({
// 抽離出來的檔案叫 main.css
filename: 'main.css'
})
],
module: { // 子產品
rules: [
{
// 找到所有的js檔案
test: /\.js$/,
use: {
loader: 'babel-loader',
// 用babel-loader，需要把ES6轉換成ES5文法
options: {
// 這是一個大插件的集合
presets: [
// @babel/preset-env 就是用來将ES6轉化成ES5文法的
'@babel/preset-env'
],
// 我們還需要配置一些小插件
plugins: [
// 将ES7文法中的類裝飾器轉換成ES5文法， legacy 是寬松模式
['@babel/plugin-proposal-decorators', {'legacy': true}],
// 将ES7文法中的類轉換成ES5文法
['@babel/plugin-proposal-class-properties', {'loose': true}]
]
}
}
},
// 規則,需要css-loader， 可以處理css檔案
// css-loader 主要用來解析 @import這種文法的
// 還需要style-loader，它是把css插入到head的标簽中
// loader的用法， 多個loader需要一個數組
// loader是有順序的，預設是從右向左執行
// loader還可以寫成 對象方式
{
test: /\.css$/,
use: [
// 把樣式都抽離成一個單獨的css檔案，叫main.css
MiniCssExtractPlugin.loader,
// 給CSS3文法，比如transfrom加上字首。
// 需要建立 postcss.config.js 配置檔案
// 需要引用 autoprefixer 這個插件
'css-loader',
'postcss-loader'
]
},
// 還可以處理less檔案
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'less-loader' // 把less轉變為css
]
},
// 還可能處理 sass stylus,
// sass 要安裝的包 node-sass sass-loader
// stylus 要安裝的包 stylus stylus-loader
{
// 找到所有的scss檔案
test: /\.scss$/,
// 用的loader統一是sass-loader,sass和scss用的都是sass-loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'sass-loader' // 把scss轉變為css
]
},
{
// 找到所有的.styl檔案
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'stylus-loader' // 把stylus轉變為css
]
}
]
}
}
運作：
npm run dev
浏覽器：
成功将ES7的類的裝飾器轉換成了ES5文法。
3、将ES7的生成器轉換成ES5文法
使用@babel/plugin-transform-runtime
安裝：
npm install @babel/plugin-transform-runtime -D
// 或者
npm install @babel/plugin-transform-runtime --save-dev
-D 就是 --save-dev，被寫入到devDependencies對象裡面去，
-S 就是 --save， 被寫入到dependencies 對象裡面去。
而package.json檔案裡面的 devDependencies 和 dependencies 對象有什麼差別呢？
devDependencies 裡面的插件隻用于開發環境，不用于生産環境，而dependencies 是需要釋出到生産環境的。
還需要一個插件 @babel/runtime
安裝：
npm install --save @babel/runtime
src/a.js:
module.exports = 'hello'
class B {
}
function * gen (params) {
yield 1
}
console.log(gen().next())
在webpack.config.js中進行配置：
// webpack是node寫出來的 node的寫法
// path是node的内置子產品，是以不需要去安裝
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 對單獨抽離出來的css檔案進行壓縮。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 對生成的bundle.js檔案進行壓縮。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// 對單獨抽離出來的main.css進行壓縮時，
// 使用到了optimize-css-assets-webpack-plugin插件
// 是以需要加一個優化項配置
optimization: {
minimizer: [
// 對生成的bundle.js進行壓縮
new UglifyJsPlugin({
cache: true,
// 并發打包，一起壓縮多個。
parallel: true,
sourceMap: true
}),
// 對抽離出來的main.css進行壓縮
new OptimizeCSSAssetsPlugin({})
]
},
devServer: { // 開發伺服器的配置
port: 3000,
progress: true, // 編譯的進度條
contentBase: './dist', // 以dist目錄為預設啟動目錄
compress: true, // 自動壓縮
open: true // 自動打開浏覽器，适合懶人
},
// 模式：預設有兩種，一種叫生産環境production， 一種叫 development
// production 是經過壓縮過的
// 是以，我們選擇 development模式，可以看清打包後的代碼
mode: 'production',
entry: './src/index.js', // 入口檔案，也就是打包這個js檔案
// 打包的檔案位置
output: {
// 當js檔案更改， [hash]的值會變化，每次build會生成一個新的js檔案
// [hash:8]，隻顯示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出來當然檔案名叫 bundle.js
// resolve() 可以把相對路徑解析成絕對路徑
// __dirname 是目前目錄
path: path.resolve(__dirname, 'dist') // 路徑必須是一個絕對路徑
},
// 數組 放着所有的webpack插件
plugins: [
// 因為HtmlWebpackPlugin是一個類，是以使用的時候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪個html模闆
filename: 'index.html', // 打包後也叫做 index.html
// 壓縮這個html檔案(主要是對HTML檔案進行壓縮)
minify: {
// 删除這個html檔案的雙引号
removeAttributeQuotes: true,
// 變成一行
collapseWhitespace: true
},
// 加一個hash戳
hash: true
}),
new MiniCssExtractPlugin({
// 抽離出來的檔案叫 main.css
filename: 'main.css'
})
],
module: { // 子產品
rules: [
{
// 找到所有的js檔案
test: /\.js$/,
use: {
loader: 'babel-loader',
// 用babel-loader，需要把ES6轉換成ES5文法
options: {
// 這是一個大插件的集合
presets: [
// @babel/preset-env 就是用來将ES6轉化成ES5文法的
'@babel/preset-env'
],
// 我們還需要配置一些小插件
plugins: [
// 将ES7文法中的類裝飾器轉換成ES5文法， legacy 是寬松模式
['@babel/plugin-proposal-decorators', {'legacy': true}],
// 将ES7文法中的類轉換成ES5文法
['@babel/plugin-proposal-class-properties', {'loose': true}],
'@babel/plugin-transform-runtime'
]
}
},
// 隻查找src目錄下的js
include: path.resolve(__dirname, 'src'),
// 不找node_modules裡面的js
// 排除
exclude: /node_modules/
},
// 規則,需要css-loader， 可以處理css檔案
// css-loader 主要用來解析 @import這種文法的
// 還需要style-loader，它是把css插入到head的标簽中
// loader的用法， 多個loader需要一個數組
// loader是有順序的，預設是從右向左執行
// loader還可以寫成 對象方式
{
test: /\.css$/,
use: [
// 把樣式都抽離成一個單獨的css檔案，叫main.css
MiniCssExtractPlugin.loader,
// 給CSS3文法，比如transfrom加上字首。
// 需要建立 postcss.config.js 配置檔案
// 需要引用 autoprefixer 這個插件
'css-loader',
'postcss-loader'
]
},
// 還可以處理less檔案
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'less-loader' // 把less轉變為css
]
},
// 還可能處理 sass stylus,
// sass 要安裝的包 node-sass sass-loader
// stylus 要安裝的包 stylus stylus-loader
{
// 找到所有的scss檔案
test: /\.scss$/,
// 用的loader統一是sass-loader,sass和scss用的都是sass-loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'sass-loader' // 把scss轉變為css
]
},
{
// 找到所有的.styl檔案
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'stylus-loader' // 把stylus轉變為css
]
}
]
}
}
運作：
npm run dev
4、将ES7的includes文法轉換成ES5文法。
需要用到@babel-polyfill 這個插件。
npm install @babel/polyfill --save
src/a.js:
module.exports = 'hello'
require('@babel/polyfill') // 支援ES7的includes文法
class B {
}
function * gen (params) {
yield 1
}
console.log(gen().next())
// includes 是ES7的文法
'aaa'.includes('a')
5、校驗js代碼
需要 eslint-loader 插件。
安裝：
npm install eslint eslint-loader --save
可以在 https://eslint.org/demo/ 裡面，進行配置，然後下載下傳 .eslintrc.json 檔案。
比如：
或者，在項目根目錄建立 .eslintrc.json 檔案。
.eslintrc.json:
可以檢視eslint-loader的配置文檔： https://www.npmjs.com/package/eslint-loader。
在webpack.config.js中進行配置：
// webpack是node寫出來的 node的寫法
// path是node的内置子產品，是以不需要去安裝
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 對單獨抽離出來的css檔案進行壓縮。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 對生成的bundle.js檔案進行壓縮。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// 對單獨抽離出來的main.css進行壓縮時，
// 使用到了optimize-css-assets-webpack-plugin插件
// 是以需要加一個優化項配置
optimization: {
minimizer: [
// 對生成的bundle.js進行壓縮
new UglifyJsPlugin({
cache: true,
// 并發打包，一起壓縮多個。
parallel: true,
sourceMap: true
}),
// 對抽離出來的main.css進行壓縮
new OptimizeCSSAssetsPlugin({})
]
},
devServer: { // 開發伺服器的配置
port: 3000,
progress: true, // 編譯的進度條
contentBase: './dist', // 以dist目錄為預設啟動目錄
compress: true, // 自動壓縮
open: true // 自動打開浏覽器，适合懶人
},
// 模式：預設有兩種，一種叫生産環境production， 一種叫 development
// production 是經過壓縮過的
// 是以，我們選擇 development模式，可以看清打包後的代碼
mode: 'production',
entry: './src/index.js', // 入口檔案，也就是打包這個js檔案
// 打包的檔案位置
output: {
// 當js檔案更改， [hash]的值會變化，每次build會生成一個新的js檔案
// [hash:8]，隻顯示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出來當然檔案名叫 bundle.js
// resolve() 可以把相對路徑解析成絕對路徑
// __dirname 是目前目錄
path: path.resolve(__dirname, 'dist') // 路徑必須是一個絕對路徑
},
// 數組 放着所有的webpack插件
plugins: [
// 因為HtmlWebpackPlugin是一個類，是以使用的時候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪個html模闆
filename: 'index.html', // 打包後也叫做 index.html
// 壓縮這個html檔案(主要是對HTML檔案進行壓縮)
minify: {
// 删除這個html檔案的雙引号
removeAttributeQuotes: true,
// 變成一行
collapseWhitespace: true
},
// 加一個hash戳
hash: true
}),
new MiniCssExtractPlugin({
// 抽離出來的檔案叫 main.css
filename: 'main.css'
})
],
module: { // 子產品
// loader 預設是從右到左， 從下到上執行
rules: [
{
// 找到所有的js檔案
test: /\.js$/,
use: {
loader: 'eslint-loader',
options: {
enforce: 'pre' // previous 是之前執行 ，讓eslint-loader 強制在之前執行。 post是之後
}
}
},
{
// 找到所有的js檔案
test: /\.js$/,
use: {
loader: 'babel-loader',
// 用babel-loader，需要把ES6轉換成ES5文法
options: {
// 這是一個大插件的集合
presets: [
// @babel/preset-env 就是用來将ES6轉化成ES5文法的
'@babel/preset-env'
],
// 我們還需要配置一些小插件
plugins: [
// 将ES7文法中的類裝飾器轉換成ES5文法， legacy 是寬松模式
['@babel/plugin-proposal-decorators', {'legacy': true}],
// 将ES7文法中的類轉換成ES5文法
['@babel/plugin-proposal-class-properties', {'loose': true}],
'@babel/plugin-transform-runtime'
]
}
},
// 隻查找src目錄下的js
include: path.resolve(__dirname, 'src'),
// 不找node_modules裡面的js
// 排除
exclude: /node_modules/
},
// 規則,需要css-loader， 可以處理css檔案
// css-loader 主要用來解析 @import這種文法的
// 還需要style-loader，它是把css插入到head的标簽中
// loader的用法， 多個loader需要一個數組
// loader是有順序的，預設是從右向左執行
// loader還可以寫成 對象方式
{
test: /\.css$/,
use: [
// 把樣式都抽離成一個單獨的css檔案，叫main.css
MiniCssExtractPlugin.loader,
// 給CSS3文法，比如transfrom加上字首。
// 需要建立 postcss.config.js 配置檔案
// 需要引用 autoprefixer 這個插件
'css-loader',
'postcss-loader'
]
},
// 還可以處理less檔案
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'less-loader' // 把less轉變為css
]
},
// 還可能處理 sass stylus,
// sass 要安裝的包 node-sass sass-loader
// stylus 要安裝的包 stylus stylus-loader
{
// 找到所有的scss檔案
test: /\.scss$/,
// 用的loader統一是sass-loader,sass和scss用的都是sass-loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'sass-loader' // 把scss轉變為css
]
},
{
// 找到所有的.styl檔案
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'stylus-loader' // 把stylus轉變為css
]
}
]
}
}
八、全局變量引入問題
1、expose-loader
比如，安裝jQuery
npm install jquery --save
需要使用到一個插件： expose-loader， 暴露全局的loader，是一個内聯的loader。
pre 前面執行的loader， normal 普通的loader， 内聯 loader， 後置 post loader。
安裝：
npm install expose-loader -D
expose-loader 可以把比如jquery之類的庫，暴露到window上
src/index.js:
// import $ from 'jquery'
// console.log($)
// 内聯loader
import $ from 'expose-loader?$!jquery' // 将jquery暴露成一個$
// expose-loader 暴露全局的loader
console.log(window.$)
2、也可以直接配置到webpack.config.js檔案中：
module: { // 子產品
// loader 預設是從右到左， 從下到上執行
rules: [
{
test: require.resolve('jquery'),
use: 'expose-loader?$'
},
然後，src/index.js中引入jquery:
import $ from 'jquery'
console.log(window.$)
運作：
npm run dev
3、js檔案中不引入jquery，也可以拿到$
需要用到一個webpack的内置插件
src/index.js:
console.log($); // 在每個子產品中注入 $對象
在webpack.config.js中進行配置：
// webpack是node寫出來的 node的寫法
// path是node的内置子產品，是以不需要去安裝
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 對單獨抽離出來的css檔案進行壓縮。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 對生成的bundle.js檔案進行壓縮。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// webpack 也是一個子產品
let webpack = require('webpack')
module.exports = {
// 對單獨抽離出來的main.css進行壓縮時，
// 使用到了optimize-css-assets-webpack-plugin插件
// 是以需要加一個優化項配置
optimization: {
minimizer: [
// 對生成的bundle.js進行壓縮
new UglifyJsPlugin({
cache: true,
// 并發打包，一起壓縮多個。
parallel: true,
sourceMap: true
}),
// 對抽離出來的main.css進行壓縮
new OptimizeCSSAssetsPlugin({})
]
},
devServer: { // 開發伺服器的配置
port: 3000,
progress: true, // 編譯的進度條
contentBase: './dist', // 以dist目錄為預設啟動目錄
compress: true, // 自動壓縮
open: true // 自動打開浏覽器，适合懶人
},
// 模式：預設有兩種，一種叫生産環境production， 一種叫 development
// production 是經過壓縮過的
// 是以，我們選擇 development模式，可以看清打包後的代碼
mode: 'production',
entry: './src/index.js', // 入口檔案，也就是打包這個js檔案
// 打包的檔案位置
output: {
// 當js檔案更改， [hash]的值會變化，每次build會生成一個新的js檔案
// [hash:8]，隻顯示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出來當然檔案名叫 bundle.js
// resolve() 可以把相對路徑解析成絕對路徑
// __dirname 是目前目錄
path: path.resolve(__dirname, 'dist') // 路徑必須是一個絕對路徑
},
// 數組 放着所有的webpack插件
plugins: [
// 因為HtmlWebpackPlugin是一個類，是以使用的時候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪個html模闆
filename: 'index.html', // 打包後也叫做 index.html
// 壓縮這個html檔案(主要是對HTML檔案進行壓縮)
minify: {
// 删除這個html檔案的雙引号
removeAttributeQuotes: true,
// 變成一行
collapseWhitespace: true
},
// 加一個hash戳
hash: true
}),
new MiniCssExtractPlugin({
// 抽離出來的檔案叫 main.css
filename: 'main.css'
}),
// 提供插件
new webpack.ProvidePlugin({
// 把$用jquery暴露出來
$: 'jquery'
})
],
module: { // 子產品
// loader 預設是從右到左， 從下到上執行
rules: [
{
// 找到所有的js檔案
test: /\.js$/,
use: {
loader: 'babel-loader',
// 用babel-loader，需要把ES6轉換成ES5文法
options: {
// 這是一個大插件的集合
presets: [
// @babel/preset-env 就是用來将ES6轉化成ES5文法的
'@babel/preset-env'
],
// 我們還需要配置一些小插件
plugins: [
// 将ES7文法中的類裝飾器轉換成ES5文法， legacy 是寬松模式
['@babel/plugin-proposal-decorators', {'legacy': true}],
// 将ES7文法中的類轉換成ES5文法
['@babel/plugin-proposal-class-properties', {'loose': true}],
'@babel/plugin-transform-runtime'
]
}
},
// 隻查找src目錄下的js
include: path.resolve(__dirname, 'src'),
// 不找node_modules裡面的js
// 排除
exclude: /node_modules/
},
// 規則,需要css-loader， 可以處理css檔案
// css-loader 主要用來解析 @import這種文法的
// 還需要style-loader，它是把css插入到head的标簽中
// loader的用法， 多個loader需要一個數組
// loader是有順序的，預設是從右向左執行
// loader還可以寫成 對象方式
{
test: /\.css$/,
use: [
// 把樣式都抽離成一個單獨的css檔案，叫main.css
MiniCssExtractPlugin.loader,
// 給CSS3文法，比如transfrom加上字首。
// 需要建立 postcss.config.js 配置檔案
// 需要引用 autoprefixer 這個插件
'css-loader',
'postcss-loader'
]
},
// 還可以處理less檔案
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'less-loader' // 把less轉變為css
]
},
// 還可能處理 sass stylus,
// sass 要安裝的包 node-sass sass-loader
// stylus 要安裝的包 stylus stylus-loader
{
// 找到所有的scss檔案
test: /\.scss$/,
// 用的loader統一是sass-loader,sass和scss用的都是sass-loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'sass-loader' // 把scss轉變為css
]
},
{
// 找到所有的.styl檔案
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'stylus-loader' // 把stylus轉變為css
]
}
]
}
}
運作：
npm run dev
4、如果在html中外鍊引入jquery
src/index.html:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: pink;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<!-- 模闆 -->
<div>内容區</div>
<div class="scss">scss</div>
<div class="stylus">stylus</div>
</body>
</html>
然後又在src/index.js中引入：
import $ from 'jquery';
console.log($);
我們希望在html檔案中外鍊引入的jquery不參與打包。
在webpack.config.js中進行配置：
// webpack是node寫出來的 node的寫法
// path是node的内置子產品，是以不需要去安裝
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 對單獨抽離出來的css檔案進行壓縮。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 對生成的bundle.js檔案進行壓縮。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// webpack 也是一個子產品
let webpack = require('webpack')
module.exports = {
// 對單獨抽離出來的main.css進行壓縮時，
// 使用到了optimize-css-assets-webpack-plugin插件
// 是以需要加一個優化項配置
optimization: {
minimizer: [
// 對生成的bundle.js進行壓縮
new UglifyJsPlugin({
cache: true,
// 并發打包，一起壓縮多個。
parallel: true,
sourceMap: true
}),
// 對抽離出來的main.css進行壓縮
new OptimizeCSSAssetsPlugin({})
]
},
devServer: { // 開發伺服器的配置
port: 3000,
progress: true, // 編譯的進度條
contentBase: './dist', // 以dist目錄為預設啟動目錄
compress: true, // 自動壓縮
open: true // 自動打開浏覽器，适合懶人
},
// 模式：預設有兩種，一種叫生産環境production， 一種叫 development
// production 是經過壓縮過的
// 是以，我們選擇 development模式，可以看清打包後的代碼
mode: 'production',
entry: './src/index.js', // 入口檔案，也就是打包這個js檔案
// 打包的檔案位置
output: {
// 當js檔案更改， [hash]的值會變化，每次build會生成一個新的js檔案
// [hash:8]，隻顯示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出來當然檔案名叫 bundle.js
// resolve() 可以把相對路徑解析成絕對路徑
// __dirname 是目前目錄
path: path.resolve(__dirname, 'dist') // 路徑必須是一個絕對路徑
},
// 數組 放着所有的webpack插件
plugins: [
// 因為HtmlWebpackPlugin是一個類，是以使用的時候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪個html模闆
filename: 'index.html', // 打包後也叫做 index.html
// 壓縮這個html檔案(主要是對HTML檔案進行壓縮)
minify: {
// 删除這個html檔案的雙引号
removeAttributeQuotes: true,
// 變成一行
collapseWhitespace: true
},
// 加一個hash戳
hash: true
}),
new MiniCssExtractPlugin({
// 抽離出來的檔案叫 main.css
filename: 'main.css'
}),
// 提供插件
new webpack.ProvidePlugin({
// 把$用jquery暴露出來
$: 'jquery'
})
],
// jquery是在html檔案中引用的，不進行打包
externals: {
jquery: '$'
},
module: { // 子產品
// loader 預設是從右到左， 從下到上執行
rules: [
{
// 找到所有的js檔案
test: /\.js$/,
use: {
loader: 'babel-loader',
// 用babel-loader，需要把ES6轉換成ES5文法
options: {
// 這是一個大插件的集合
presets: [
// @babel/preset-env 就是用來将ES6轉化成ES5文法的
'@babel/preset-env'
],
// 我們還需要配置一些小插件
plugins: [
// 将ES7文法中的類裝飾器轉換成ES5文法， legacy 是寬松模式
['@babel/plugin-proposal-decorators', {'legacy': true}],
// 将ES7文法中的類轉換成ES5文法
['@babel/plugin-proposal-class-properties', {'loose': true}],
'@babel/plugin-transform-runtime'
]
}
},
// 隻查找src目錄下的js
include: path.resolve(__dirname, 'src'),
// 不找node_modules裡面的js
// 排除
exclude: /node_modules/
},
// 規則,需要css-loader， 可以處理css檔案
// css-loader 主要用來解析 @import這種文法的
// 還需要style-loader，它是把css插入到head的标簽中
// loader的用法， 多個loader需要一個數組
// loader是有順序的，預設是從右向左執行
// loader還可以寫成 對象方式
{
test: /\.css$/,
use: [
// 把樣式都抽離成一個單獨的css檔案，叫main.css
MiniCssExtractPlugin.loader,
// 給CSS3文法，比如transfrom加上字首。
// 需要建立 postcss.config.js 配置檔案
// 需要引用 autoprefixer 這個插件
'css-loader',
'postcss-loader'
]
},
// 還可以處理less檔案
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'less-loader' // 把less轉變為css
]
},
// 還可能處理 sass stylus,
// sass 要安裝的包 node-sass sass-loader
// stylus 要安裝的包 stylus stylus-loader
{
// 找到所有的scss檔案
test: /\.scss$/,
// 用的loader統一是sass-loader,sass和scss用的都是sass-loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'sass-loader' // 把scss轉變為css
]
},
{
// 找到所有的.styl檔案
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'stylus-loader' // 把stylus轉變為css
]
}
]
}
}
運作：
npm run dev
總結：
有以下幾種方式來引入第三方子產品，比如jquery。
(1) expose-loader ，暴露到window上。
(2) webpack.providePlugin， 給每個人提供一個$。
(3) 直接引入但是不打包，在webpack.config.js中進行配置。
九、圖檔處理
如何在webpack中使用圖檔，并且能讓webpack來打包我們的圖檔。
圖檔引入有很多種方式：
(1) 在js中建立圖檔來引入
(2) 在css中引入，比如background()
(3) 在html中通過 <img src="" alt="" />
1、在js中建立圖檔來引入
src/index.js:
// (1) 在js中建立圖檔來引入
import logo from './logo.png' // 把圖檔引入，傳回的結果是一個新的圖檔位址
let image = new Image()
console.log(logo)
image.src = logo
document.body.appendChild(image)
複制一張圖檔到src目錄，重命名為 logo.png。
需要用到一個插件：
npm install file-loader -D
file-loader 預設會在内部生成一張圖檔，到src目錄下。
并且會把生成的圖檔的名字傳回回來。
在webpack.config.js中進行配置：
// webpack是node寫出來的 node的寫法
// path是node的内置子產品，是以不需要去安裝
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 對單獨抽離出來的css檔案進行壓縮。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 對生成的bundle.js檔案進行壓縮。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// 對單獨抽離出來的main.css進行壓縮時，
// 使用到了optimize-css-assets-webpack-plugin插件
// 是以需要加一個優化項配置
optimization: {
minimizer: [
// 對生成的bundle.js進行壓縮
new UglifyJsPlugin({
cache: true,
// 并發打包，一起壓縮多個。
parallel: true,
sourceMap: true
}),
// 對抽離出來的main.css進行壓縮
new OptimizeCSSAssetsPlugin({})
]
},
devServer: { // 開發伺服器的配置
port: 3000,
progress: true, // 編譯的進度條
contentBase: './dist', // 以dist目錄為預設啟動目錄
compress: true, // 自動壓縮
open: true // 自動打開浏覽器，适合懶人
},
// 模式：預設有兩種，一種叫生産環境production， 一種叫 development
// production 是經過壓縮過的
// 是以，我們選擇 development模式，可以看清打包後的代碼
mode: 'production',
entry: './src/index.js', // 入口檔案，也就是打包這個js檔案
// 打包的檔案位置
output: {
// 當js檔案更改， [hash]的值會變化，每次build會生成一個新的js檔案
// [hash:8]，隻顯示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出來當然檔案名叫 bundle.js
// resolve() 可以把相對路徑解析成絕對路徑
// __dirname 是目前目錄
path: path.resolve(__dirname, 'dist') // 路徑必須是一個絕對路徑
},
// 數組 放着所有的webpack插件
plugins: [
// 因為HtmlWebpackPlugin是一個類，是以使用的時候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪個html模闆
filename: 'index.html', // 打包後也叫做 index.html
// 壓縮這個html檔案(主要是對HTML檔案進行壓縮)
minify: {
// 删除這個html檔案的雙引号
removeAttributeQuotes: true,
// 變成一行
collapseWhitespace: true
},
// 加一個hash戳
hash: true
}),
new MiniCssExtractPlugin({
// 抽離出來的檔案叫 main.css
filename: 'main.css'
})
],
module: { // 子產品
// loader 預設是從右到左， 從下到上執行
rules: [
{
// 找到所有的圖檔
test:/\.(png|jpg|gif)$/,
use: 'file-loader'
},
{
// 找到所有的js檔案
test: /\.js$/,
use: {
loader: 'babel-loader',
// 用babel-loader，需要把ES6轉換成ES5文法
options: {
// 這是一個大插件的集合
presets: [
// @babel/preset-env 就是用來将ES6轉化成ES5文法的
'@babel/preset-env'
],
// 我們還需要配置一些小插件
plugins: [
// 将ES7文法中的類裝飾器轉換成ES5文法， legacy 是寬松模式
['@babel/plugin-proposal-decorators', {'legacy': true}],
// 将ES7文法中的類轉換成ES5文法
['@babel/plugin-proposal-class-properties', {'loose': true}],
'@babel/plugin-transform-runtime'
]
}
},
// 隻查找src目錄下的js
include: path.resolve(__dirname, 'src'),
// 不找node_modules裡面的js
// 排除
exclude: /node_modules/
},
// 規則,需要css-loader， 可以處理css檔案
// css-loader 主要用來解析 @import這種文法的
// 還需要style-loader，它是把css插入到head的标簽中
// loader的用法， 多個loader需要一個數組
// loader是有順序的，預設是從右向左執行
// loader還可以寫成 對象方式
{
test: /\.css$/,
use: [
// 把樣式都抽離成一個單獨的css檔案，叫main.css
MiniCssExtractPlugin.loader,
// 給CSS3文法，比如transfrom加上字首。
// 需要建立 postcss.config.js 配置檔案
// 需要引用 autoprefixer 這個插件
'css-loader',
'postcss-loader'
]
},
// 還可以處理less檔案
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'less-loader' // 把less轉變為css
]
},
// 還可能處理 sass stylus,
// sass 要安裝的包 node-sass sass-loader
// stylus 要安裝的包 stylus stylus-loader
{
// 找到所有的scss檔案
test: /\.scss$/,
// 用的loader統一是sass-loader,sass和scss用的都是sass-loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'sass-loader' // 把scss轉變為css
]
},
{
// 找到所有的.styl檔案
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'stylus-loader' // 把stylus轉變為css
]
}
]
}
}
因為圖檔是實體檔案，是以運作打包：
npm run build
會在dist目錄生成一個圖檔的檔案。
然後運作開發環境，打開浏覽器檢視：
npm run dev
成功在頁面上輸出圖檔！
2、在CSS中引入圖檔
src/index.css:
@import './a.css';
body {
background: #c00;
transform: rotate(45deg);
background: url("./logo.png");
}
在index.js中引入：
import './index.css'
然後在webpack.config.js中進行配置：
// webpack是node寫出來的 node的寫法
// path是node的内置子產品，是以不需要去安裝
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 對單獨抽離出來的css檔案進行壓縮。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 對生成的bundle.js檔案進行壓縮。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// 對單獨抽離出來的main.css進行壓縮時，
// 使用到了optimize-css-assets-webpack-plugin插件
// 是以需要加一個優化項配置
optimization: {
minimizer: [
// 對生成的bundle.js進行壓縮
new UglifyJsPlugin({
cache: true,
// 并發打包，一起壓縮多個。
parallel: true,
sourceMap: true
}),
// 對抽離出來的main.css進行壓縮
new OptimizeCSSAssetsPlugin({})
]
},
devServer: { // 開發伺服器的配置
port: 3000,
progress: true, // 編譯的進度條
contentBase: './dist', // 以dist目錄為預設啟動目錄
compress: true, // 自動壓縮
open: true // 自動打開浏覽器，适合懶人
},
// 模式：預設有兩種，一種叫生産環境production， 一種叫 development
// production 是經過壓縮過的
// 是以，我們選擇 development模式，可以看清打包後的代碼
mode: 'production',
entry: './src/index.js', // 入口檔案，也就是打包這個js檔案
// 打包的檔案位置
output: {
// 當js檔案更改， [hash]的值會變化，每次build會生成一個新的js檔案
// [hash:8]，隻顯示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出來當然檔案名叫 bundle.js
// resolve() 可以把相對路徑解析成絕對路徑
// __dirname 是目前目錄
path: path.resolve(__dirname, 'dist') // 路徑必須是一個絕對路徑
},
// 數組 放着所有的webpack插件
plugins: [
// 因為HtmlWebpackPlugin是一個類，是以使用的時候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪個html模闆
filename: 'index.html', // 打包後也叫做 index.html
// 壓縮這個html檔案(主要是對HTML檔案進行壓縮)
minify: {
// 删除這個html檔案的雙引号
removeAttributeQuotes: true,
// 變成一行
collapseWhitespace: true
},
// 加一個hash戳
hash: true
}),
new MiniCssExtractPlugin({
// 抽離出來的檔案叫 main.css
filename: 'main.css'
})
],
module: { // 子產品
// loader 預設是從右到左， 從下到上執行
rules: [
{
// 找到所有的圖檔
test:/\.(png|jpg|gif)$/,
use: 'file-loader'
},
{
// 找到所有的js檔案
test: /\.js$/,
use: {
loader: 'babel-loader',
// 用babel-loader，需要把ES6轉換成ES5文法
options: {
// 這是一個大插件的集合
presets: [
// @babel/preset-env 就是用來将ES6轉化成ES5文法的
'@babel/preset-env'
],
// 我們還需要配置一些小插件
plugins: [
// 将ES7文法中的類裝飾器轉換成ES5文法， legacy 是寬松模式
['@babel/plugin-proposal-decorators', {'legacy': true}],
// 将ES7文法中的類轉換成ES5文法
['@babel/plugin-proposal-class-properties', {'loose': true}],
'@babel/plugin-transform-runtime'
]
}
},
// 隻查找src目錄下的js
include: path.resolve(__dirname, 'src'),
// 不找node_modules裡面的js
// 排除
exclude: /node_modules/
},
// 規則,需要css-loader， 可以處理css檔案
// css-loader 主要用來解析 @import這種文法的
// 還需要style-loader，它是把css插入到head的标簽中
// loader的用法， 多個loader需要一個數組
// loader是有順序的，預設是從右向左執行
// loader還可以寫成 對象方式
{
test: /\.css$/,
use: [
// 把樣式都抽離成一個單獨的css檔案，叫main.css
MiniCssExtractPlugin.loader,
// 給CSS3文法，比如transfrom加上字首。
// 需要建立 postcss.config.js 配置檔案
// 需要引用 autoprefixer 這個插件
'css-loader',
'postcss-loader'
]
},
// 還可以處理less檔案
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'less-loader' // 把less轉變為css
]
},
// 還可能處理 sass stylus,
// sass 要安裝的包 node-sass sass-loader
// stylus 要安裝的包 stylus stylus-loader
{
// 找到所有的scss檔案
test: /\.scss$/,
// 用的loader統一是sass-loader,sass和scss用的都是sass-loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'sass-loader' // 把scss轉變為css
]
},
{
// 找到所有的.styl檔案
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'stylus-loader' // 把stylus轉變為css
]
}
]
}
}
運作：
npm run dev
3、在html檔案中引入
src/index.html:
<img src="./logo.png" alt="" />
這裡需要一個插件：
npm install html-withimg-loader -D
在webpack.config.js中進行配置：
// webpack是node寫出來的 node的寫法
// path是node的内置子產品，是以不需要去安裝
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 對單獨抽離出來的css檔案進行壓縮。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 對生成的bundle.js檔案進行壓縮。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// 對單獨抽離出來的main.css進行壓縮時，
// 使用到了optimize-css-assets-webpack-plugin插件
// 是以需要加一個優化項配置
optimization: {
minimizer: [
// 對生成的bundle.js進行壓縮
new UglifyJsPlugin({
cache: true,
// 并發打包，一起壓縮多個。
parallel: true,
sourceMap: true
}),
// 對抽離出來的main.css進行壓縮
new OptimizeCSSAssetsPlugin({})
]
},
devServer: { // 開發伺服器的配置
port: 3000,
progress: true, // 編譯的進度條
contentBase: './dist', // 以dist目錄為預設啟動目錄
compress: true, // 自動壓縮
open: true // 自動打開浏覽器，适合懶人
},
// 模式：預設有兩種，一種叫生産環境production， 一種叫 development
// production 是經過壓縮過的
// 是以，我們選擇 development模式，可以看清打包後的代碼
mode: 'production',
entry: './src/index.js', // 入口檔案，也就是打包這個js檔案
// 打包的檔案位置
output: {
// 當js檔案更改， [hash]的值會變化，每次build會生成一個新的js檔案
// [hash:8]，隻顯示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出來當然檔案名叫 bundle.js
// resolve() 可以把相對路徑解析成絕對路徑
// __dirname 是目前目錄
path: path.resolve(__dirname, 'dist') // 路徑必須是一個絕對路徑
},
// 數組 放着所有的webpack插件
plugins: [
// 因為HtmlWebpackPlugin是一個類，是以使用的時候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪個html模闆
filename: 'index.html', // 打包後也叫做 index.html
// 壓縮這個html檔案(主要是對HTML檔案進行壓縮)
minify: {
// 删除這個html檔案的雙引号
removeAttributeQuotes: true,
// 變成一行
collapseWhitespace: true
},
// 加一個hash戳
hash: true
}),
new MiniCssExtractPlugin({
// 抽離出來的檔案叫 main.css
filename: 'main.css'
})
],
module: { // 子產品
// loader 預設是從右到左， 從下到上執行
rules: [
{
// 找到html檔案
test: /\.html$/,
use: 'html-withimg-loader'
},
{
// 找到所有的圖檔
test:/\.(png|jpg|gif)$/,
use: 'file-loader'
},
{
// 找到所有的js檔案
test: /\.js$/,
use: {
loader: 'babel-loader',
// 用babel-loader，需要把ES6轉換成ES5文法
options: {
// 這是一個大插件的集合
presets: [
// @babel/preset-env 就是用來将ES6轉化成ES5文法的
'@babel/preset-env'
],
// 我們還需要配置一些小插件
plugins: [
// 将ES7文法中的類裝飾器轉換成ES5文法， legacy 是寬松模式
['@babel/plugin-proposal-decorators', {'legacy': true}],
// 将ES7文法中的類轉換成ES5文法
['@babel/plugin-proposal-class-properties', {'loose': true}],
'@babel/plugin-transform-runtime'
]
}
},
// 隻查找src目錄下的js
include: path.resolve(__dirname, 'src'),
// 不找node_modules裡面的js
// 排除
exclude: /node_modules/
},
// 規則,需要css-loader， 可以處理css檔案
// css-loader 主要用來解析 @import這種文法的
// 還需要style-loader，它是把css插入到head的标簽中
// loader的用法， 多個loader需要一個數組
// loader是有順序的，預設是從右向左執行
// loader還可以寫成 對象方式
{
test: /\.css$/,
use: [
// 把樣式都抽離成一個單獨的css檔案，叫main.css
MiniCssExtractPlugin.loader,
// 給CSS3文法，比如transfrom加上字首。
// 需要建立 postcss.config.js 配置檔案
// 需要引用 autoprefixer 這個插件
'css-loader',
'postcss-loader'
]
},
// 還可以處理less檔案
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'less-loader' // 把less轉變為css
]
},
// 還可能處理 sass stylus,
// sass 要安裝的包 node-sass sass-loader
// stylus 要安裝的包 stylus stylus-loader
{
// 找到所有的scss檔案
test: /\.scss$/,
// 用的loader統一是sass-loader,sass和scss用的都是sass-loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'sass-loader' // 把scss轉變為css
]
},
{
// 找到所有的.styl檔案
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'stylus-loader' // 把stylus轉變為css
]
}
]
}
}
運作：
npm run dev
4、url-loader
file-loader和url-loader都可以用來處理圖檔。
安裝：
npm install url-loader -D
在webpack.config.js中進行配置：
// webpack是node寫出來的 node的寫法
// path是node的内置子產品，是以不需要去安裝
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 對單獨抽離出來的css檔案進行壓縮。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 對生成的bundle.js檔案進行壓縮。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// 對單獨抽離出來的main.css進行壓縮時，
// 使用到了optimize-css-assets-webpack-plugin插件
// 是以需要加一個優化項配置
optimization: {
minimizer: [
// 對生成的bundle.js進行壓縮
new UglifyJsPlugin({
cache: true,
// 并發打包，一起壓縮多個。
parallel: true,
sourceMap: true
}),
// 對抽離出來的main.css進行壓縮
new OptimizeCSSAssetsPlugin({})
]
},
devServer: { // 開發伺服器的配置
port: 3000,
progress: true, // 編譯的進度條
contentBase: './dist', // 以dist目錄為預設啟動目錄
compress: true, // 自動壓縮
open: true // 自動打開浏覽器，适合懶人
},
// 模式：預設有兩種，一種叫生産環境production， 一種叫 development
// production 是經過壓縮過的
// 是以，我們選擇 development模式，可以看清打包後的代碼
mode: 'production',
entry: './src/index.js', // 入口檔案，也就是打包這個js檔案
// 打包的檔案位置
output: {
// 當js檔案更改， [hash]的值會變化，每次build會生成一個新的js檔案
// [hash:8]，隻顯示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出來當然檔案名叫 bundle.js
// resolve() 可以把相對路徑解析成絕對路徑
// __dirname 是目前目錄
path: path.resolve(__dirname, 'dist') // 路徑必須是一個絕對路徑
},
// 數組 放着所有的webpack插件
plugins: [
// 因為HtmlWebpackPlugin是一個類，是以使用的時候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪個html模闆
filename: 'index.html', // 打包後也叫做 index.html
// 壓縮這個html檔案(主要是對HTML檔案進行壓縮)
minify: {
// 删除這個html檔案的雙引号
removeAttributeQuotes: true,
// 變成一行
collapseWhitespace: true
},
// 加一個hash戳
hash: true
}),
new MiniCssExtractPlugin({
// 抽離出來的檔案叫 main.css
filename: 'main.css'
})
],
module: { // 子產品
// loader 預設是從右到左， 從下到上執行
rules: [
{
// 找到html檔案
test: /\.html$/,
use: 'html-withimg-loader'
},
{
// 找到所有的圖檔
test:/\.(png|jpg|gif)$/,
// 做一個限制，當我們的圖檔，小于多少k的時候，用base64來轉化
// 否則用file-loader産生真實的圖檔
use: {
loader: 'url-loader',
options: {
limit: 200*1024 // 小于200k，會轉化成base64
}
}
},
{
// 找到所有的js檔案
test: /\.js$/,
use: {
loader: 'babel-loader',
// 用babel-loader，需要把ES6轉換成ES5文法
options: {
// 這是一個大插件的集合
presets: [
// @babel/preset-env 就是用來将ES6轉化成ES5文法的
'@babel/preset-env'
],
// 我們還需要配置一些小插件
plugins: [
// 将ES7文法中的類裝飾器轉換成ES5文法， legacy 是寬松模式
['@babel/plugin-proposal-decorators', {'legacy': true}],
// 将ES7文法中的類轉換成ES5文法
['@babel/plugin-proposal-class-properties', {'loose': true}],
'@babel/plugin-transform-runtime'
]
}
},
// 隻查找src目錄下的js
include: path.resolve(__dirname, 'src'),
// 不找node_modules裡面的js
// 排除
exclude: /node_modules/
},
// 規則,需要css-loader， 可以處理css檔案
// css-loader 主要用來解析 @import這種文法的
// 還需要style-loader，它是把css插入到head的标簽中
// loader的用法， 多個loader需要一個數組
// loader是有順序的，預設是從右向左執行
// loader還可以寫成 對象方式
{
test: /\.css$/,
use: [
// 把樣式都抽離成一個單獨的css檔案，叫main.css
MiniCssExtractPlugin.loader,
// 給CSS3文法，比如transfrom加上字首。
// 需要建立 postcss.config.js 配置檔案
// 需要引用 autoprefixer 這個插件
'css-loader',
'postcss-loader'
]
},
// 還可以處理less檔案
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'less-loader' // 把less轉變為css
]
},
// 還可能處理 sass stylus,
// sass 要安裝的包 node-sass sass-loader
// stylus 要安裝的包 stylus stylus-loader
{
// 找到所有的scss檔案
test: /\.scss$/,
// 用的loader統一是sass-loader,sass和scss用的都是sass-loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'sass-loader' // 把scss轉變為css
]
},
{
// 找到所有的.styl檔案
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'stylus-loader' // 把stylus轉變為css
]
}
]
}
}
進行打包：
npm run build
十、打封包件分類
我們還需要給我們的靜态資源，進行分類。
css抽離出來放到一個目錄下，圖檔放到另一個目錄下。
而且，給打包出來的css和js以及圖檔路徑前，都加上 "http://xxx.com"。
在webpack.config.js中進行配置：
// webpack是node寫出來的 node的寫法
// path是node的内置子產品，是以不需要去安裝
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 對單獨抽離出來的css檔案進行壓縮。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 對生成的bundle.js檔案進行壓縮。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// 對單獨抽離出來的main.css進行壓縮時，
// 使用到了optimize-css-assets-webpack-plugin插件
// 是以需要加一個優化項配置
optimization: {
minimizer: [
// 對生成的bundle.js進行壓縮
new UglifyJsPlugin({
cache: true,
// 并發打包，一起壓縮多個。
parallel: true,
sourceMap: true
}),
// 對抽離出來的main.css進行壓縮
new OptimizeCSSAssetsPlugin({})
]
},
devServer: { // 開發伺服器的配置
port: 3000,
progress: true, // 編譯的進度條
contentBase: './dist', // 以dist目錄為預設啟動目錄
compress: true, // 自動壓縮
open: true // 自動打開浏覽器，适合懶人
},
// 模式：預設有兩種，一種叫生産環境production， 一種叫 development
// production 是經過壓縮過的
// 是以，我們選擇 development模式，可以看清打包後的代碼
mode: 'production',
entry: './src/index.js', // 入口檔案，也就是打包這個js檔案
// 打包的檔案位置
output: {
// 當js檔案更改， [hash]的值會變化，每次build會生成一個新的js檔案
// [hash:8]，隻顯示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出來當然檔案名叫 bundle.js
// resolve() 可以把相對路徑解析成絕對路徑
// __dirname 是目前目錄
path: path.resolve(__dirname, 'dist'), // 路徑必須是一個絕對路徑
// 那麼html中的css和圖檔，都會加上這個字首路徑
publicPath: 'http://xxx.com' // 給打包出來的路徑都加上這個字首
},
// 數組 放着所有的webpack插件
plugins: [
// 因為HtmlWebpackPlugin是一個類，是以使用的時候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪個html模闆
filename: 'index.html', // 打包後也叫做 index.html
// 壓縮這個html檔案(主要是對HTML檔案進行壓縮)
minify: {
// 删除這個html檔案的雙引号
removeAttributeQuotes: true,
// 變成一行
collapseWhitespace: true
},
// 加一個hash戳
hash: true
}),
new MiniCssExtractPlugin({
// 抽離出來的檔案叫 main.css
// filename: 'main.css'
// 抽離出來的main.css 放到css目錄下
filename: 'css/main.css'
})
],
module: { // 子產品
// loader 預設是從右到左， 從下到上執行
rules: [
{
// 找到html檔案
test: /\.html$/,
use: 'html-withimg-loader'
},
{
// 找到所有的圖檔
test:/\.(png|jpg|gif)$/,
// 做一個限制，當我們的圖檔，小于多少k的時候，用base64來轉化
// 否則用file-loader産生真實的圖檔
use: {
loader: 'url-loader',
options: {
// limit: 200*1024, // 200k
limit: 1, // 一般都會大于1位元組。會生成一個真實的圖檔
outputPath: '/img/'
}
}
},
{
// 找到所有的js檔案
test: /\.js$/,
use: {
loader: 'babel-loader',
// 用babel-loader，需要把ES6轉換成ES5文法
options: {
// 這是一個大插件的集合
presets: [
// @babel/preset-env 就是用來将ES6轉化成ES5文法的
'@babel/preset-env'
],
// 我們還需要配置一些小插件
plugins: [
// 将ES7文法中的類裝飾器轉換成ES5文法， legacy 是寬松模式
['@babel/plugin-proposal-decorators', {'legacy': true}],
// 将ES7文法中的類轉換成ES5文法
['@babel/plugin-proposal-class-properties', {'loose': true}],
'@babel/plugin-transform-runtime'
]
}
},
// 隻查找src目錄下的js
include: path.resolve(__dirname, 'src'),
// 不找node_modules裡面的js
// 排除
exclude: /node_modules/
},
// 規則,需要css-loader， 可以處理css檔案
// css-loader 主要用來解析 @import這種文法的
// 還需要style-loader，它是把css插入到head的标簽中
// loader的用法， 多個loader需要一個數組
// loader是有順序的，預設是從右向左執行
// loader還可以寫成 對象方式
{
test: /\.css$/,
use: [
// 把樣式都抽離成一個單獨的css檔案，叫main.css
MiniCssExtractPlugin.loader,
// 給CSS3文法，比如transfrom加上字首。
// 需要建立 postcss.config.js 配置檔案
// 需要引用 autoprefixer 這個插件
'css-loader',
'postcss-loader'
]
},
// 還可以處理less檔案
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'less-loader' // 把less轉變為css
]
},
// 還可能處理 sass stylus,
// sass 要安裝的包 node-sass sass-loader
// stylus 要安裝的包 stylus stylus-loader
{
// 找到所有的scss檔案
test: /\.scss$/,
// 用的loader統一是sass-loader,sass和scss用的都是sass-loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'sass-loader' // 把scss轉變為css
]
},
{
// 找到所有的.styl檔案
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種文法的
'postcss-loader',
'stylus-loader' // 把stylus轉變為css
]
}
]
}
}
打包：
npm run build
打包結果：
2、如果隻想給圖檔進行路徑的處理
那麼單獨在處理圖檔的裡面加上 publicPath。
webpack.config.js:
{
// 找到所有的圖檔
test:/\.(png|jpg|gif)$/,
// 做一個限制，當我們的圖檔，小于多少k的時候，用base64來轉化
// 否則用file-loader産生真實的圖檔
use: {
loader: 'url-loader',
options: {
// limit: 200*1024, // 200k
limit: 1, // 一般都會大于1位元組。會生成一個真實的圖檔
outputPath: '/img/',
publicPath: 'http://123.com' // 單獨給圖檔的路徑加上字首路徑
}
}
},
而這裡就可以不用加了：
在output對象裡面加，是給所有打包出來的css和圖檔以及js，路徑都加上字首路徑 "http://xxx.com" 。
運作：
npm run build
結果是隻給圖檔加上了字首路徑，而css和js路徑，都沒有加字首路徑。