webpack4.X 隨手使用教程，從入門到進坑

時間  2019-12-05
標籤 webpack4.x webpack 隨手 使用 教程 入門 简体版
原文   原文鏈接

起步安裝

npm i webpack --save-dev複製代碼

打包

下面咱們對main.js進行打包 

main.js//

const a=function(){
    alert('hello webpack');
}複製代碼

命令行打包輸入（使用webapck4.0以上的須要安裝webpack-cli環境）：javascript

webpack main.js  ./dist/index.jscss

上面命令行中 main.js 爲入口文件（便可須要打包的js文件） ./dist/index.js 爲打包後輸出的文件路徑html

CSS打包

在webpack打包css文件時候須要安裝相應的loader，由於在webpack打包是默認沒有解析css文件類型的，因此咱們須要安裝style-loader,css-loader。（css-loader負責解析和打包.css文件的內容，style-laoder負責將css-loader解析打包的內容注入到html中進行應用）

使用npm 進行loader的安裝 java

npm i style-loader css-loader --save-devnode

咱們修改main.js進行引入CSS文件的操做webpack

main.js//

require('./style.css');

const a=function(){    alert('hello webpack');
}
複製代碼

style.css//
html,body{
    padding:0;
    margin:0;
}
body{
    background:red;
}複製代碼

進行命令行操做打包css3

webpack  main.js  ./dist/index.js  --module-bind 'css=style-loader!css-loader'es6

上面命令行中的 --module-bind 是webpack命令行參數，表示模塊綁定某功能，'css=style-loader!css-loader' 表示爲當打包的是css文件時候使用插件 css-loader和style-loader進行打包web

wbepack的經常使用命令行參數

上面打包css中咱們提到了webpack的命令行參數 --module-bind ,webapck中還有許多的命令行參數，這些參數命令行有益幫助咱們對項目的優化和調試，下面我就列幾個經常使用的命令行參數好了

--wacth 當文件發生改變時候自動進行打包npm

--progress  顯示打包過（顯示打包進度讀條）

--display-modules 顯示全部打包引用的模塊，而且也會顯示此模塊是經過什麼loader進行處理等詳細數據

--display-reasons  顯示所需打包的模塊的緣由

--config 文件名  修改webpack打包配置文件的指向


webpack配置文件webpack.config.js配置打包 

使用命令行打包不少類型文件和其餘配置時候每次打包都很是麻煩，因此可使用webpack的配置文件來設置好配置進行一鍵打包，不用每次都輸入很長很長的命令行。
咱們先在項目結構下建立一下文件目錄，方便咱們後面進行項目整理和打包

/scr/script/main.js

/dist/

首先咱們在項目的根目錄建立一個 webapck.config.js 的文件（打包配置文件）

webpack.config.js//

module.exports = {
    //使用的模式
    mode:"production",
    //1.打包入口文件參數
    entry:'./src/script/main.js',
    //2.打包後輸出的文件目錄和文件名
    output:{
        //目錄
        path:__dirname+"/dist/",
        //相對path的路徑文件名
        filename:"index.js"
    },
    //3.資源文件處理配置
    module:{}
    //4.插件參數
    plugins:{}
}複製代碼

上面參數中：

mode: 指定打包的的模式進行代碼優化，參數分別有三個：development (開發環境模式)， production（生產環境模式）  none (任何默認優化選項).

entry: 爲打包入口文件的路徑，輸入值能夠是字符串，數組字符串，json。什麼狀況下輸入數組，json呢？請看下面解析

            string: 單個打包文件路徑

            Array<string>: 將兩個或多個平行不互依賴打包到一個塊映射表中

            json: 打包多個文件並根據對應的值輸出多個對應的文件。使用json打包多個文件須要修改 output的值

output:{                           
        path:__dirname+"/dist/",
        //[name]對應被打包的文件名，[chunhash]對應每次打包的哈希值,對版本管理很是有用
        filename:'[name].js' or '[hash].js' or  '[chunhash].js'
}複製代碼

output: 是打包後輸出文件的路徑，傳的參數是json格式數據，path鍵對應的值必須是絕對路徑目錄，因此咱們用到了node中的語法 __dirname (當前文件的路徑) 進行路徑接拼,filename就是輸出文件的相對於path的相對路徑。

module: 對文件類型處理的模塊參數

plugins: 調用的插件

好了，咱們在命令行中運行一下webpack 就能夠發現咱們已經打包成功了


自動生成html文件插件。 html-webpack-Plugin

若是咱們用chunhash爲打包文件命名時候，每次打包的名字都不一樣手動去修改index的引入的文件名稱很是大的麻煩。因此咱們能夠用自動生成html的文件讓webpack在打包的生成html時候引入打包的js。 html-webpack-plugin

首先安裝插件

npm i html-webpack-plugin --save-dev

修改webapck.config.js 中的plugins的內容

// 引入html-webpack-plugin插件
const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports = {    
    mode:'development',    
    //打包入口文件參數
    entry:'./src/script/main.js',
    //打包後輸出的文件目錄和文件名    
    output:{        
        //目錄        
        path:__dirname+"/dist/",        
        //文件名
        filename:"index.js"
    },
    // 資源文件處理配置
    module:{

    },
    // 插件調用
    plugins:[
        // 實例化插件
        new htmlWebpackPlugin(),
    ]
}複製代碼

當咱們須要指定生成html的內容樣式時候能夠進行對 html-webpack-plugin 傳參，參數爲json格。

plugins:[
        // 實例化插件
        new htmlWebpackPlugin({template：'temp.html'}),
    ]複製代碼

參數中的

tmplate：是值相對根目錄的模板html文件

html-webpack-plugin 的參數中能夠指定多種屬性，如下列幾個經常使用知足開發場景使用的屬性參數

template:string （可選）指定引用的模板文件

filename:string （可選）指定生成的html的文件名，默認index.html

inject:{Boolean\|String} （可選）把webpack打包的js文件放到指定標籤中引入，默認放到body底部，當值爲false時將不進行引入打包的文件

minifly:{Boolean\|Object} （可選）是否對生成html文件進行壓縮，參數屬性: collapseInlineTagWhitespace:true 壓縮代碼，removeComments:true 刪除註釋 

tiltel:string （可選） 注入到生成的html中，用模板語法進行調用, <%= htmlWebpackPlugin.options.titel%> 

chunks:Array<tring> 根據本次打包的chunk來指定實例生成html中引入的文件

excludeChunks:Array<string> 指定排除chunk本次打包文件不進行引入到html中


相似於後端嵌套html執行同樣，<%=%>表示打印輸出。

具體html-webpack-plugin的參數和用法能夠參考官方文檔 https://www.npmjs.com/package/html-webpack-plugin 

多頁面應用打包 html-webpack-plugin

對於多頁面應用打包html咱們改怎麼打包呢？其實很簡單。下面咱們來應用一下

在plugins中new多一個實例html-webpack-plugin，而且傳入文件名參數指定不一樣的文件名。

plugins:[
      new htmlWebpackPlugin({template:"./index.html",filename:"index.html"}),
      new htmlWebpackPlugin({template:"./index.html",filename:"app2.html"}),
]
複製代碼


運行命令 webpack 打包一下


自動打包生成了兩個html文件。

可是，若是咱們要引入兩個或個不一樣的js，而且打包區分到不一樣的html中該怎麼辦呢，這樣咱們就須要在html-webpack-plugin中傳入參數chunks便可 
plugins:[
      new htmlWebpackPlugin({template:"./index.html",filename:"index.html",chunks:['main.js','a.js']}),
      new htmlWebpackPlugin({template:"./index.html",filename:"app2.html",chunks:['b.js']}),
]複製代碼


運行webpack打包~

生成的index.html和app2.html因此引用的js已經區分引入各自的js啦。



publicPath 修改html引入文件的路徑

webpack打包每次打包完是以絕對路徑引入js文件的，若是咱們放置的項目位置不在站點根目錄的話會出現引入文件出錯404，因此咱們能夠設置publicPath佔位符對引入路徑進行修改

在output中參數添加屬性publicPath:

//打包後輸出的文件目錄和文件名
    output:{
        //目錄
        path:__dirname+"/dist/",
        //文件名
        filename:"index.js",
        publicPath:"http://cdn.com/"
    },複製代碼


webpack打包一下，咱們會發現js引入的路徑已經和以前的不同了


如何處理資源文件

這裏咱們來學webpack最牛逼的東西，loader處理。能夠對es6轉es5，css前綴添加，圖片壓縮，建立組件等等功能。

首先，咱們要改一下文件的目錄和webpack.config.js配置方便咱們後面的學習。


以app.js爲入口文件引入viwe組件

//app.js
import viwe from "./components/viwe/index.js";
function hello(){
    console.log(viwe)
}
new hello();複製代碼

下面咱們對viwe組件文件的編寫

component/viwe/index.js

//component/viwe/index.js
//引入html模板
import temp from './index.html';

function out(){
    return {
        name:'viwe',
        tmplate:temp
    }
}
//默認導出組件模塊
export default out

複製代碼

component/viwe/index.html

<div>
    <h1>hello,webpack</h1>
</div>複製代碼

component/viwe/index.less

div{
    h1{
        color: red;
    }
}複製代碼

文件編輯完了，咱們來對webpack.config.js進行修改配置

// 引入html-webpack-plugin插件
const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports = {
    mode:'development',
    //打包入口文件參數
    entry:"./src/app.js",
    //打包後輸出的文件目錄和文件名
    output:{
        //目錄
        path:__dirname+"/dist/",
        //文件名
        filename:"[name].js",
    },
    // 文件處理參數
    module:{
    },
    // 插件調用
    plugins:[
        // 實例化插件
        new htmlWebpackPlugin({template:'index.html'})
    ]
}複製代碼

好了，咱們先打包一下看看會怎麼樣


咱們會發現webpack報錯了，模塊出現錯誤，你應該使用對應的loader進行文件資源處理。

因此咱們要進行loader使用了，首先咱們基本瞭解一下loader的使用先

須要在webpack.config.js的module.rules中添加loader處理參數，以json的方式傳入

參數中有test:的爲正則匹配的文件類型，use:爲調用的loader，能夠傳字符串或數組，傳入數組的狀況是須要使用多個loader對文件資源進行處理，而且進行的順序爲從右到左。若是須要對loader傳參須要用到options:

// 文件處理參數
    module:{
        rules:[
            {
                test: /\.js$/,
                //若是須要使用多個loader進行處理，須要傳入數組的方式，而且運行loader順序爲從右到左
                use: [
                        {
                            loader:'babel-loader',
                            //對loader傳參
                            options:{
                                presets:['@babel/preset-env']
                            },
                        }
                    ],
                exclude:/node_modules/
            }
        ]
    },複製代碼

參數詳解：

test:  須要處理的文件類型，正則參數

use:string|Array  處理文件類型的loader，只調用一個loader而且不傳參數時候使用字符串形式傳入，須要傳入參數到laoder使用json格式，須要調用多個loader進行文件處理時候須要json數組形式

exclude:  不進行資源處理的文件夾

babel的支持：ES6，ES7轉換ES5或相對應兼容瀏覽器

es6和es7在現代大多數瀏覽器中仍是不兼容的，因此咱們要用babel來js進行轉換es5，以便兼容各個瀏覽器。

npm安裝babel npm install babel-loader @babel/core @babel/preset-env --save-dev

調用babel對js代碼進行轉換的方法有不少種，下面我舉例兩種簡單調用方法好了。

對webpack.config.js配置文件中的module.rules添加babel調用而且傳入插件調用參數

// 資源文件處理配置
    module:{
        rules:[
            // 調用babel
            {
               test: /\.js$/,
                use:
                     {
                        loader:'babel-loader',
                        // 傳入參數
                        options:{
                            presets:['@babel/preset-env']
                        }
                    }
                ,
                // 排除不須要進行處理的文件夾
                exclude:/node_modules/
            }
        ]
    },複製代碼

webpack運行一下打包，查看打包出來的js代碼已經進行了轉換


除了在module.rules屬性配置外，咱們還在項目根目錄中建立一個.babelrc（官方推薦）對babel進行配置。

建立.babelrc對babel進行功能配置

{
    "presets": [
        [
            "@babel/preset-env",
        ]
    ]
}複製代碼

咱們把webpack.config.js出的傳參刪除掉運行一下webpack，查看打包出來的代碼也已經給轉換了。

css文件處理與添加自動添加前綴

下面我介紹如何在webpack.config.js中配置打包css文件和進行自動前綴添加處理，咱們先建立一個css文件編寫一個css3的樣式如：display:flex;

在module.rules中添加多一個對象

// 處理css資源
            {
                test:/\.css$/,
                use:[
                    // 3.寫入到html中
                    {loader:'style-loader'},
                    // 2.對css文件進行處理
                    {loader:'css-loader'}
                ]
            }複製代碼


就這樣就配置完啦，運行一下webpack打包能夠看到improt的css也被打包進去了。

如何添加瀏覽器版本前綴

咱們須要先按照 postcss-loader和post的插件 autoprefixer 。

npm安裝 npm i postcss-loader autoprefixer --save-dev

安裝完成後咱們對上面的css資源處理屬性添加多一個postcss-loader。

{
                test:/\.css$/,
                use:[
                    // 3.寫入到html中
                    {loader:'style-loader'},
                    // 2.對css文件進行處理
                    {loader:'css-loader'},
                    // 1.先進行Postcss處理css文件添加前綴
                    {loader:'postcss-loader'}
                ]
            }複製代碼


完成這一步，咱們須要建立一個postcss的配置文件進行配置postcss的模式和插件，在項目根目錄建立一個 postcss.config.js

module.exports={
    plugins:[
        require('autoprefixer'),
    ]
}複製代碼

上面配置的意思爲添加使用插件 autoprefixer

好了，基本配置咱們都配完了，進行webpack打包。打開瀏覽器能夠打包樣式已經被添加前綴了。


如何指定須要添加的前綴的瀏覽器版本

在默認添加前綴中，autoprefixer爲咱們添加的前綴爲當前瀏覽器版本初版兼容前綴，那咱們對應一些特殊的須要，須要添加各類瀏覽器的前綴和他們的歷史版本兼容前綴，改怎麼辦呢？其實很簡單，只須要在package.json中配置一下便可

打開根目錄的package.json進行添加

"browserslist": [
    "last 5 version",
    "> 1%",
    "maintained node versions",
    "not dead"  
]複製代碼

上面屬性解釋：

"last 5version" =>添加瀏覽器最後5個版本的兼容前綴

">1%" =>全球市場份額大於1%的瀏覽器


處理css文件中@import的特別狀況

當咱們在css文件@import 其餘css文件時候會發現autoprefixer沒有爲引入的css文件進行添加前綴，這時候咱們須要爲css-loader傳遞一個參數 importLoaders:number，告知須要引入多少個loader來處理咱們@improt進來的css文件 

// 處理css資源
            {
                test:/\.css$/,
                use:[
                    // 3.寫入到html中
                    {loader:'style-loader'},
                    // 2.對css文件進行處理
                    {loader:'css-loader',options:{improtLoaders:1}},
                    // 1.先進行Postcss處理css文件添加前綴
                    {loader:'postcss-loader'}
                ]
            }複製代碼

這樣咱們打包就會自動爲@import的css文件添加前綴了。

處理less或sass文件資源

處理less或sass文件很是簡單，須要安裝less 和less-loader 或sass 和sass-loader便可

首先咱們先npm進行安裝一下

npm i less less-loader --save-dev

在webpack.config.js配置文件中的module.rules添加多一個參數

// 處理less資源            {                test:/\.less$/,                use:[                    // 3.寫入到html中                    {loader:'style-loader'},                    // 2.對css文件進行處理                    {loader:'css-loader'},                    // 1.先進行Postcss處理css文件添加前綴                    {loader:'postcss-loader'},                    {loader:'less-loader'}                ]            }複製代碼

運行wbepack打包一下，打包成功~


處理template模板

在項目中咱們會對功能進行組件化，這時候template模板是必不可少的，處理template模板是依據咱們使用的loader進行配置的，一般template當成字符串或函數引用的。下面咱們對把template當成字符串引用的實例好了

npm安裝html-loader  npm i html-loader --save-dev

咱們建立一個temp.html

//temp.html

<div>
    <h1>hello,templatte</h1>
</div>複製代碼

在入口文件main.js引入temp.html

//main.js
import temp from './temp.html';

const hello=(function(){
    function hello(x){
        document.getElementsByTagName('body')[0].innerHTML=x;
    }
    return hello;
})()
new hello(temp);
複製代碼

完成基本引入，咱們來對webpack.config.js的module.rules添加配置

// 處理template模板
       {
          test:/\.html/,
          use:'html-loader'
       }複製代碼

webpack打包運行一下，咱們會發現打包出來的html已經被加載咱們的template模板了。

處理圖片資源打包

若是咱們在html或css、js中引入圖片、svg資源直接進行打包的話會出現報錯的狀況，由於咱們要安裝相應的loader對資源文件進行處理，這裏咱們就用到了file-loader，url-loader

npm安裝 npm i url-loader file-loader --save-dev

在webpack.config.js中的module.rules添加配置屬性

{
    test:/.(jpg|png|gif|svg)$/,
    use:[
        {
            loader:'url-loader'
            //傳參設置文件小於多少kb進行轉化成流的bs64編碼嵌入文件中
            options:{
                    //10KB
                    limit:10000
                }
        }
    ]
}複製代碼

在上面的配置中

url-loader是對引入的圖片資源進行轉換成bs64編碼的流嵌入到咱們的css或html中，limit：number參數設置大於多少的圖片進行轉換。當文件資源大於設定的大小會交給file-loader進行處理，file-loader是對文件進行提取而且自動修改webpack打包出來的路徑。

接下來咱們運行webpack打包就不會出錯，圖片也引來進來~

若是咱們有特殊的需求須要對圖片資源進行打包時候壓縮的話能夠引用image-webpack-loader對資源進行壓縮

npm 安裝 npm i image-webpack-loader --save-dev

{
    test:/.(jpg|png|gif|svg)$/,
    use:[
        {
            loader:'url-loader'
            //傳參設置文件小於多少kb進行轉化成流的bs64編碼嵌入文件中
            options:{
                    //10KB
                    limit:10000
                }
        }
        //調用image-webpack
        {loader:"image-webpack-loader"}
    ]
}複製代碼

這樣咱們的webpack就會自動爲咱們的圖片資源大小進行壓縮打包了


---------------------------------------底線啦--------------------------------------------------

先寫到這裏吧，後續會更新

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