前言:
webpack4出了以後,一些外掛變化很大,和之前的版本使用方式不一樣,新手入坑,本篇將介紹如何從一開始配置webpack4的開發版本,對css,js進行編譯打包合併生成md5,CSS中的圖片處理,js自動注入html頁,刪除指定檔案,提取公共檔案,熱更新等等。
後面有附上webpack打包優化的配置資訊及詳細註釋
更新了一篇前端架構之node jwt認證,歡迎各位大佬觀摩觀摩!!!
更新了一篇小小node server架構,歡迎各位大佬觀摩觀摩!!!
安裝
//全域性安裝
npm install -g webpack webpack-cli
複製程式碼
建立資料夾初始化
//建立資料夾
mkdir webpack4demo
//進入
cd webpack4demo
//初始化
npm init -y複製程式碼
建立資料夾scripts 裡面建立index.js檔案
index.js
const s=()=>{
console.log('s init')
}
s()複製程式碼
建立webpack.config.js檔案
webpack.config.js
const path = require("path");
module.exports = {
entry: {
index: "./scripts/index.js" //入口檔案,若不配置webpack4將自動查詢src目錄下的index.js檔案
},
output: {
filename: "[name].bundle.js",//輸出檔名,[name]表示入口檔案js名
path: path.join(__dirname, "dist")//輸出檔案路徑
}
}
複製程式碼
執行webpack --mode development將會生成dist/index.bundle.js
建立index.html,並引入js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
$END$
</body>
<script src="./dist/index.bundle.js"></script>
</html>複製程式碼
開啟瀏覽器將會看到之前設定的js檔案生效
對css,js進行編譯打包合併生成md5
建立a.js,c.js,a.css,更改index.js
a.js
import acss from './a.css'
import c from './c.js'
const a={
init(){
console.log("a init bbbaaa")
},
cinit(){
c.init()
}
}
export default a;複製程式碼
c.js
const c={
init(){
console.log("ccccc")
}
}
export default c;複製程式碼
a.css
body{
background-color: #6b0392;
}複製程式碼
index.js
import a from './a.js'
import c from './c.js'
const s=()=>{
a.init()
a.cinit()
c.init()
console.log('s init')
}
s()複製程式碼
配置webpack.config.js檔案
const path = require("path");
module.exports = {
entry: {
index: "./scripts/index.js"
},
output: {
filename: "[name].bundle.[hash].js",//[hash]會在後面生成隨機hash值
path: path.join(__dirname, "dist")
},
module: { // 處理對應模組
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]//處理css
}
]
},
}複製程式碼
安裝style-loader, css-loader
npm install style-loader css-loader --save-dev
複製程式碼
執行webpack --mode development
將會看到一個帶md5值得js檔案,將他引入html中
CSS中的圖片處理
安裝url-loader, file-loader
npm install url-loader file-loader --save-dev
複製程式碼
修改a.css 將一張圖片放到scripts目錄
body{
background-image: url("./timg.jpg");
background-color: #a748ca;
}複製程式碼
配置webpack.config.js檔案
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{
outputPath:'images/',//輸出到images資料夾
limit:500 //是把小於500B的檔案打成Base64的格式,寫入JS
}
}]
}
]
},複製程式碼
執行webpack --mode development
將會看到dist中有一個images資料夾中有一張圖片,開啟index.html
js自動注入html檔案
使用外掛html-webpack-plugin,可以將生成的js自動引入html頁面,不用手動新增
//安裝html-webpack-plugin
npm install html-webpack-plugin --save-dev
//安裝webpack webpack-cli
npm install webpack webpack-cli --save-dev
複製程式碼
配置webpack.config.js檔案
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
module.exports = {
entry: {
index: "./scripts/index.js"
},
output: {
filename: "[name].bundle.[hash].js",
path: path.join(__dirname, "dist")
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
plugins: [// 對應的外掛
new HtmlWebpackPlugin({ //配置
filename: 'index.html',//輸出檔名
template: './index.html',//以當前目錄下的index.html檔案為模板生成dist/index.html檔案
}),
]
}複製程式碼
執行webpack --mode development
記得要講之前手動引入的script刪除,便可以看到dist那裡自動生成一個index.html,開啟便可以看到。
刪除指定檔案
使用外掛clean-webpack-plugin,刪除指定檔案,更多配置,檢視clean-webpack-plugin
npm install clean-webpack-plugin --save-dev複製程式碼
配置webpack.config.js檔案
const CleanWebpackPlugin = require('clean-webpack-plugin');//引入
plugins: [// 對應的外掛
new HtmlWebpackPlugin({ //配置
filename: 'index.html',//輸出檔名
template: './index.html',//以當前目錄下的index.html檔案為模板生成dist/index.html檔案
}),
new CleanWebpackPlugin(['dist']), //傳入陣列,指定要刪除的目錄
]複製程式碼
執行webpack --mode development,
可以看到dist目錄被刪除,又生成一個新的dist,之前的js檔案已經被刪除。
提取公共檔案
我們可看到a.js和index.js都引入了c.js檔案,為什麼要提取公共程式碼,簡單來說,就是減少程式碼冗餘,提高載入速度。和之前的webpack配置不一樣:
//之前配置
// new webpack.optimize.SplitChunksPlugin({
// name: 'common', // 如果還要提取公共程式碼,在新建一個例項
// minChunks: 2, //重複兩次之後就提取出來
// chunks: ['index', 'a'] // 指定提取範圍
// }),
//現在配置
optimization: {
splitChunks: {
cacheGroups: {
commons: { // 抽離自己寫的公共程式碼
chunks: "initial",
name: "common", // 打包後的檔名,任意命名
minChunks: 2,//最小引用2次
minSize: 0 // 只要超出0位元組就生成一個新包
},
vendor: { // 抽離第三方外掛
test: /node_modules/, // 指定是node_modules下的第三方包
chunks: 'initial',
name: 'vendor', // 打包後的檔名,任意命名
// 設定優先順序,防止和自定義的公共程式碼提取時被覆蓋,不進行打包
priority: 10
},
}
}
},
複製程式碼
下載jq npm install jquery --save
在a.js,index.js引用 import $ from 'jquery'
輸出$
生成3個js檔案,執行webpack --mode development
熱更新,自動重新整理
我們將用到webpack-dev-server
,webpack-dev-server
就是一個基於Node.js
和webpack
的一個小型伺服器,它有強大的自動重新整理和熱替換功能。
安裝webpack-dev-server
npm install webpack-dev-server --save-dev複製程式碼
配置webpack.config.js檔案
const webpack = require("webpack");
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
}),
new CleanWebpackPlugin(['dist']), //傳入陣列,指定要刪除的目錄
// 熱更新,熱更新不是重新整理
new webpack.HotModuleReplacementPlugin()
],
devServer: {//配置此靜態檔案伺服器,可以用來預覽打包後專案
inline:true,//打包後加入一個websocket客戶端
hot:true,//熱載入
contentBase: path.resolve(__dirname, 'dist'),//開發服務執行時的檔案根目錄
host: 'localhost',//主機地址
port: 9090,//埠號
compress: true//開發伺服器是否啟動gzip等壓縮
},複製程式碼
配置package.json
"scripts": {
"dev": "webpack-dev-server --mode development"
},複製程式碼
執行npm run dev
訪問 http://localhost:9090/
隨便修改任一檔案便會自動重新整理網站顯示修改相應內容。
總結:
webpack4還有很多很多配置,例如css的拆分呀,less sass配置呀,js編譯es6呀,多入口配置呀,生產環境配置,js沒有使用的模組自動檢測剝離等等,只能等下次有空在總結,感謝大家的觀看,新手入坑,歡迎指出錯誤的地方。
webpack打包優化配置
附上3個檔案,webpack.base.conf.js(基本配置檔案),webpack.dev.conf.js(開發環境配置檔案),webpack.prod.conf.js(生產環境配置檔案),裡面有詳細的註釋
webpack.base.conf.js
const path = require("path")
const chalk = require('chalk');
const ProgressBarPlugin = require('progress-bar-webpack-plugin')//進度條
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //CSS檔案單獨提取出來
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HappyPack = require('happypack')//多執行緒壓縮
const os = require('os')// node 提供的系統操作模組
// 根據系統的核心數量 指定執行緒池個數
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 轉換為絕對路徑
function resolve(dir) {
return path.join(__dirname,'..', dir);
}
function assetsPath(_path_) {
let assetsSubDirectory = 'static';
return path.posix.join(assetsSubDirectory, _path_)
}
module.exports = {
entry: {
app: './src/main.js'//入口檔案
},
output: {
path: resolve("dist"),//輸出檔案路徑
filename: '[name].js' //輸出檔名,[name]表示入口檔案js名
},
resolve: {
// 優化模組查詢路徑
modules: [
path.resolve('src'),
path.resolve('node_modules') // 指定node_modules所在位置 當你import 第三方模組時 直接從這個路徑下搜尋尋找
],
//開啟字尾名自動補全,指定搜尋那些檔案
extensions: ['.js','.vue','.json'],
//配置別名可以加快webpack查詢模組的速度
alias: {
'vue$': 'vue/dist/vue.esm.js',//末尾新增 $,以表示精準匹配
'@': resolve('src')
}
},
//模組
module: {
// 多個loader是有順序要求的,從右往左寫,因為轉換的時候是從右往左轉換的
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
include: resolve('src'),//限制範圍,提高打包速度
exclude: /node_modules/ //排除
},
{
test: /\.js|jsx$/,
exclude: /node_modules/,
loader: 'happypack/loader?id=happys',// cacheDirectory快取loader執行結果
include: resolve('src'),
exclude: /node_modules/
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'less-loader']
}),
include: [resolve('src')], //限制範圍,提高打包速度
exclude: /node_modules/
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use:['css-loader', 'postcss-loader', 'less-loader']}),
include: resolve('src'),
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,// 10KB 以下使用 base64
name: assetsPath('img/[name].[hash:7].[ext]')
}複製程式碼
webpack.dev.conf.js
const webpack = require('webpack')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 生成html的外掛
const devWebpackConfig = merge(baseWebpackConfig, {
devtool: 'eval-source-map', // 指定加source-map的方式
//配置此靜態檔案伺服器,可以用來預覽打包後專案
devServer: {
inline:true,//打包後加入一個websocket客戶端
hot:true,//熱載入
contentBase: path.join(__dirname, "..", "dist"), //靜態檔案根目錄
port: 3824, // 埠
host: 'localhost',
overlay: true,
compress: false // 伺服器返回瀏覽器的時候是否啟動gzip壓縮
},
watchOptions: {
ignored: /node_modules/, //忽略不用監聽變更的目錄
aggregateTimeout: 500, //防止重複儲存頻繁重新編譯,500毫秒內重複儲存不打包
poll:1000 //每秒詢問的檔案變更的次數
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '..', 'src','index.html'),
filename: 'index.html',
// vendor: './vendor.dll.js', //與dll配置檔案中output.fileName對齊
hash:true,//防止快取
// minify:{
// removeAttributeQuotes:true//壓縮 去掉引號
// }
}),
new webpack.HotModuleReplacementPlugin(), //HMR
new webpack.NamedModulesPlugin() // HMR
]
})
module.exports = devWebpackConfig 複製程式碼
webpack.prod.conf.js
const path = require('path');
const glob = require('glob');
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin') // 複製靜態資源的外掛
const CleanWebpackPlugin = require('clean-webpack-plugin') // 清空打包目錄的外掛
const HtmlWebpackPlugin = require('html-webpack-plugin') // 生成html的外掛
const baseWebpackConfig = require('./webpack.base.conf')
const merge = require('webpack-merge')
const WebpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const PurifyCSSPlugin = require("purifycss-webpack");
const ExtractTextPlugin = require('extract-text-webpack-plugin')
function assetsPath(_path_) {
let assetsSubDirectory = 'static';
return path.posix.join(assetsSubDirectory, _path_)
}
const prodWebpackConfig = merge(baseWebpackConfig, {
output:{
path: path.resolve(__dirname, '../dist'),
filename: assetsPath('js/[name].js'),
publicPath: './' //這裡要放的是靜態資源CDN的地址(一般只在生產環境下配置)
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src', 'index.html'),
filename:'index.html',
// chunks:['index', 'common'],
// vendor: './vendor.dll.js',
hash:true,//防止快取
minify:{
removeAttributeQuotes:true,//壓縮 去掉引號,
collapseWhitespace: true //是否去除空格
}
}),
new CopyWebpackPlugin([
{
from: path.join(__dirname, '../src', 'assets'),
to: path.join(__dirname, '..', 'dist', 'assets'),
ignore: ['.*']
}
]),
new CleanWebpackPlugin(['dist'], {
root: path.join(__dirname, '..'),
exclude: ['manifest.json', 'vendor.dll.js'],
verbose: true,
dry: false
}),
new WebpackParallelUglifyPlugin({
workerCount: 4, // 開啟幾個子程式去併發的執行壓縮,預設是當前電腦的cpu數量減1
uglifyJS: {
output: {
beautify: false, // 不需要格式化
comments: false // 保留註釋
},
compress: {
warnings: false, // Uglifyjs 刪除沒有程式碼時,不輸出警告
drop_console: true, // 刪除所有console語句
collapse_vars: true,
reduce_vars: true
}
}
}),
//壓縮提取出的css,並解決ExtractTextPlugin分離出的js重複問題(多個檔案引入同一css檔案)
new OptimizeCSSPlugin({
cssProcessorOptions: {safe: true}
}),
//消除未使用的CSS
new PurifyCSSPlugin({
paths: glob.sync(path.join(__dirname, '../src/*.html')),
}),
//打包css生成另外的資料夾
new ExtractTextPlugin({
filename: 'static/css/[name].css',
disable: false,
allChunks: false
})
]
})
module.exports = prodWebpackConfig複製程式碼