webpack4.x 入門一篇足矣

時間  2019-11-06
標籤 webpack4.x webpack 入門 一篇 简体版
原文   原文鏈接

前言：

webpack4出了之後，一些插件變化很大，和以前的版本使用方式不同，新手入坑，本篇將介紹如何從一開始配置webpack4的開發版本，對css，js進行編譯打包合併生成md5，CSS中的圖片處理，js自動注入html頁，刪除指定文件，提取公共文件，熱更新等等。css

後面有附上webpack打包優化的配置信息及詳細註釋html

更新了一篇前端架構之node jwt認證，歡迎各位大佬觀摩觀摩！！！前端

更新了一篇小小node server架構，歡迎各位大佬觀摩觀摩！！！vue

安裝

//全局安裝 
npm install -g webpack webpack-cli
複製代碼

建立文件夾初始化 

//建立文件夾
mkdir webpack4demo
//進入
cd webpack4demo
//初始化
npm init -y複製代碼

建立文件夾scripts 裏面建立index.js文件

index.jsnode

const s=()=>{ 
console.log('s init')
}
s()複製代碼

建立webpack.config.js文件

webpack.config.jsjquery

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.jswebpack

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.jses6

const c={
    init(){
        console.log("ccccc")
    }
}
export default c;複製代碼

a.cssweb

body{ 
    background-color: #6b0392;
}複製代碼

index.jsnpm

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複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程