webpack 基本配置（包含插件，loader）

本文基于我的另一篇文章webpack基本配置的基礎(chǔ)上新增了一些常用插件和loader的安裝

安裝

安裝之前請(qǐng)確保電腦已經(jīng)安裝了node.js

新建目錄

    npm init    // 項(xiàng)目初始化
    npm install webpack webpack-cli -D      // 安裝webpack和webpack命令行工具

配置

  • 安裝完成后新建目錄結(jié)構(gòu)
     node_modules   // 項(xiàng)目依賴 （默認(rèn)生成）
     package.json   // 項(xiàng)目描述 （默認(rèn)生成）
     src                // 源碼目錄 （手動(dòng)創(chuàng)建）
        index.js        // 入口js文件   
     views              // 視圖文件夾 （手動(dòng)創(chuàng)建）
        index.html      // 入口html文件
     webpack.config.js  // webpack配置文件 （手動(dòng)創(chuàng)建）
  • 打開(kāi)webpack.config.js，編輯內(nèi)容
    const path = require('path');   // 引入node里面內(nèi)置的path模塊
    module.expres = {
        entry:'./src/index.js',     // 入口文件位置
        output:{
            filename:'bundle.js',       // 打包完成后的文件名
            path:path.join(__dirname,'dist')   // 打包完成后輸出的位置
        }
    }
  • 配置項(xiàng)目腳本文件
    打開(kāi)package.json文件，新建項(xiàng)目腳本
    {
        ......
        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "build":"webpack"       // 添加腳本
        },
        ......
    }
  • 輸入命令 npm run build，出現(xiàn)下列代碼，就說(shuō)明打包成功
圖片

使用webpack-dev-server

webpack-dev-server 是一個(gè)簡(jiǎn)單的 web 服務(wù)器，并且能夠?qū)崟r(shí)重新加載。

  • 安裝
    npm install webpack-dev-server -D
  • 打開(kāi)webpack.config.js，添加webpack-dev-server配置
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    // wepack-dev-server 配置
    devServer:{
        port:8080,      // 配置端口為8080
        hot:true,       // 打開(kāi)熱更新
        open:true,      // 啟動(dòng)后打開(kāi)瀏覽器
        contentBase:'./views'   // 設(shè)置views目錄下的文件為服務(wù)器根目錄
    }
  • 配置項(xiàng)目腳本文件
    打開(kāi)package.json文件，新建項(xiàng)目腳本
    {
        ......
        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "build":"webpack",
            "dev":"webpack-dev-server"      // 添加腳本
        },
        ......
    }
  • 輸入命令 npm run dev，出現(xiàn)下列代碼，就說(shuō)明配置成功
    i ?wds?: Project is running at http://localhost:8080/
    i ?wds?: webpack output is served from /
    i ?wds?: Content not from webpack is served from ./views
    i ?wdm?: wait until bundle finished: /
    i ?wdm?: Hash: a098c315bf6e497c3966

使用webpack插件

插件是 webpack 的支柱功能。webpack 自身也是構(gòu)建于，你在 webpack 配置中用到的相同的插件系統(tǒng)之上！
插件目的在于解決 loader 無(wú)法實(shí)現(xiàn)的其他事。

html-webpack-plugin

官網(wǎng)是這么說(shuō)的

HtmlWebpackPlugin簡(jiǎn)化了HTML文件的創(chuàng)建，以便為你的webpack包提供服務(wù)。這對(duì)于在文件名中包含每次會(huì)隨著編譯而發(fā)生變化哈希的 webpack bundle 尤其有用。 你可以讓插件為你生成一個(gè)HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。

解釋
html-webpack-plugin 插件是用于編譯 Webpack 項(xiàng)目中的 html 類型的文件，如果直接將 html 文件置于 ./src 目錄中，用 Webpack 打包時(shí)是不會(huì)編譯到生產(chǎn)環(huán)境中的，html-wepack-plugin就解決了這個(gè)問(wèn)題，可以將js動(dòng)態(tài)的插入到html當(dāng)中

  • 安裝
    npm install html-webpack-plugin -D
  • 配置
    打開(kāi)webpack.config.js文件，編輯內(nèi)容
    const path = require('path');
    const htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry:'./src/index.js',
        output:{
            filename:'bundle.js',
            path:path.join(__dirname,'dist')
        },
        devServer:{
            port:8080,
            hot:true,
            open:true,
            contentBase:'./views'
        },
        // 添加內(nèi)容
        plugins:[
            new htmlWebpackPlugin({
                filename:'index.html',
                template:'./views/index.html'
            })
        ]
    }

mini-css-extract-plugin

該插件用于把css單獨(dú)抽出為樣式文件

  • 安裝
    npm install mini-css-extract-plugin -D
  • 配置

打開(kāi)webpack.config.js文件，編輯內(nèi)容

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
......
    plugins:[
        new htmlWebpackPlugin({
            filename:'index.html',
            template:'./views/index.html'
        }),
        new MiniCssExtractPlugin({
        filename: 'style.css',
        //所有的css文件抽出為style.css
        }),
    ],
    module: {
        rules: [
            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
            { test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] },
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
        ]
    }

optimize-css-assets-webpack-plugin && uglifyjs-webpack-plugin

optimize-css-assets-webpack-plugin 用來(lái)優(yōu)化css
uglifyjs-webpack-plugin 用來(lái)優(yōu)化js

  • 安裝
    cnpm install optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D
  • 配置

編輯weboack.config.js 配置文件

// 引入插件
const OptimizeCss= require('optimize-css-assets-webpack-plugin');
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
    ......
    optimization: {
        minimizer: [
            new OptimizeCss({}), 
            new UglifyjsWebpackPlugin()
        ]
    },
}

使用loader

webpack 可以使用 loader 來(lái)預(yù)處理文件。這允許你打包除 JavaScript 之外的任何靜態(tài)資源。你可以使用 Node.js 來(lái)很簡(jiǎn)單地編寫(xiě)自己的 loader

css-loader

css-loader用來(lái)分析css引用關(guān)系
style-loader用來(lái)生成樣式內(nèi)容插入到header里面

  • 安裝

css-loader依賴style-loader

    npm install style-loader css-loader -D
  • 配置
    打開(kāi)weboack.config.js 編輯內(nèi)容
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './views/index.html'
        })
    ],
    // 添加內(nèi)容
    module: {
        rules: [
            {
                test: /\.css$/, use: ['style-loader','css-loader']
            }
        ]
    }

url-loader

file-loader 將文件發(fā)送到輸出文件夾，并返回（相對(duì)）URL
url-loader 像 file loader 一樣工作，但如果文件小于限制，可以返回 data URL

  • 安裝

url-loader依賴file-loader

    npm install url-loader file-loader -D
  • 配置

打開(kāi)weboack.config.js 編輯內(nèi)容

    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader','css-loader'] },
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: ['url-loader'] },
            { test: /\.(jpg|png|tmp|gif)$/, use: [
                {
                    loader:'url-loader',
                    options:{
                        limit:1024 * 20
                        // 單位為字節(jié)
                        // 低于指定的限制時(shí)，返回一個(gè) DataURL。
                    },

                },
                'image-webpack-loader'
                // image-webpack-loader用于壓縮圖片
            ] 
            },
        ]
    }

less-loader

less-loader 用來(lái)解析less語(yǔ)法，配置后可以在項(xiàng)目中使用less

  • 安裝
    npm install less-loader less -D;
  • 配置
    打開(kāi)weboack.config.js 編輯內(nèi)容
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader','css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] },
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }
        ]
    }

postcss-loader

postcss-loader 應(yīng)該是 Webpack 配置中不可或缺的一個(gè) CSS loader。它負(fù)責(zé)進(jìn)一步處理 CSS 文件，比如添加瀏覽器前綴，壓縮 CSS 等。

  • 安裝
    autoprefixer用于添加瀏覽器前綴
    npm install postcss-loader autoprefixer -D;
  • 配置

編輯weboack.config.js 配置文件

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader', 
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [require('autoprefixer')]
                        }
                    }
                ]

            }
        ]
    }

在package.json中添加內(nèi)容

    "browserslist": [
        "> 1%",
        "last 2 versions"
    ]
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • webpack使用學(xué)習(xí) 本分享學(xué)習(xí)借鑒webpack中文官網(wǎng)，官網(wǎng)鏈接(中文文檔)：https://www.web...
    腿毛怪丶叔叔閱讀 968評(píng)論 0贊 5
  • 可以結(jié)合慕課網(wǎng)的視頻來(lái)讀這篇文章，地址：http://www.imooc.com/learn/802 Webpac...
    哈哈騰飛閱讀 2,094評(píng)論 0贊 7
  • 目錄第1章 webpack簡(jiǎn)介 11.1 webpack是什么？ 11.2 官網(wǎng)地址 21.3 為什么使用 web...
    lemonzoey閱讀 1,821評(píng)論 0贊 1
  • 全局安裝webpack 全局安裝webpack會(huì)有個(gè)問(wèn)題，就是當(dāng)你有兩個(gè)項(xiàng)目依賴于不同版本的webpack，就會(huì)有...
    説好的妹紙呢閱讀 1,959評(píng)論 0贊 11
  • 養(yǎng)生養(yǎng)生，不僅僅是我們養(yǎng)的是人體的生發(fā)之氣，生命之氣。 同樣也是在養(yǎng)生活的自我管理體系。 只有將自我身心的管理納入...
    秀峰理頤京海淀康復(fù)理療閱讀 126評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容