webpack 4.x

1. 安裝

webpack是基于node所以首先要安裝node環(huán)境和npm

安裝webpack 4 需要 安裝webpack 和webpack-cli
全局安裝 :

npm install webpack -g
npm install webpack-cli -g

局部安裝：

npm install webpack -S
npm install webpack-cli -S

同時(shí)局部安裝：

npm install webpack webpack-cli -S

安裝完成后可以運(yùn)行 webpack -v 查看webpack 版本
運(yùn)行項(xiàng)目需要全局安裝 webpack 然后在項(xiàng)目跟目錄內(nèi)局部 安裝

二、webpack 打包

1、首先我們創(chuàng)建個(gè) demo1文件夾作文項(xiàng)目目錄 然后在demo1里創(chuàng)建 src 文件夾
默認(rèn)出口entry : src/index.js
默認(rèn)出口output : dist/main.js
2、局部安裝webpack

npm install webpack wabpack-cli -S

3、初始化項(xiàng)目生成package.json 執(zhí)行以下命令

npm init

4、在src 目錄下創(chuàng)建一個(gè) index.js 表示默認(rèn)的入口文件，此時(shí)的目錄結(jié)構(gòu)如下


image.png

5、在index.js 寫入

alert("webpack")

6、啟動(dòng)命令行，進(jìn)入項(xiàng)目目錄 運(yùn)行webpack命令進(jìn)行打包

image.png

執(zhí)行完成出現(xiàn)以下內(nèi)容表示成功，同時(shí)項(xiàng)目根目錄多出dist目錄
image.png

此時(shí)的項(xiàng)目目錄結(jié)構(gòu) mian.js 就是打包后的文件

image.png

此時(shí)我們新建 index.html 并引入 mian.js

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="dist/main.js"></script>
</body>
</html>

打開(kāi)html將彈出 webpack

webpack配置

在根目錄新建 webpack.cofig.js

var path = require('path');
module.exports = {
    mode: 'development', //模式
    //入口
    entry: './src/index.js',
    //入口
    output: {   
        path: path.resolve(__dirname, 'dist'),  //出口路徑
        filename: 'main.js' //打包好的文件名
    },
    //模塊：例如解讀css，圖片，html的轉(zhuǎn)換壓縮
    module:{},
    //插件
    plugins:[],
    //本地服務(wù)器
    devServer:{}
};

webpack-dev-server 本地服務(wù)器

安裝 webpack-dev-server

npm install webpack-dev-server -S

修改package.json文件 在scripts 對(duì)象下添加以下屬性

"scripts": {
  //運(yùn)行 npm run dev 啟動(dòng)服務(wù)器 --自動(dòng)打開(kāi)瀏覽器 --并且實(shí)時(shí)刷新
  "dev": "webpack-dev-server --open --inline"
},

配置webpack.config.js devServer對(duì)象最簡(jiǎn)單的devServer配置項(xiàng)只有四個(gè)


//本地服務(wù)器
devServer:{
  //服務(wù)器的路徑，相當(dāng)于phpStudy的www目錄
  contentBase:'./',
  //服務(wù)器ip地址，不指定該選項(xiàng)默認(rèn)就是localhost
  host:'localhost',
  //端口，不指定自動(dòng)生成，默認(rèn)8080
  port：8080,
  //實(shí)時(shí)刷新
  inline:true
}

執(zhí)行 npm run dev 將自動(dòng)打開(kāi)瀏覽器

npm run dev

loader

webpack 自身只理解 JavaScript,所以要打包非js文件如html、css、圖片等需要使用loader，可以吧loader看做是轉(zhuǎn)換器

  • css 打包
    讓webpack識(shí)別 css 需要用到 css-loader和 style-loader
    首先我們先不安裝 css-loader和style-loader，在src目錄下新建 css目錄并創(chuàng)建 style.css
body{
    background-color: red;
}

在入口文件index.js中引入

import css from './css/style.css'

打包會(huì)報(bào)錯(cuò)，大致意思是你缺少對(duì)應(yīng)loader來(lái)識(shí)別下面的樣式


image.png

然后安裝 css-loader 和 style-loader

npm install css-loader style-loader -S

配置 webpack.config.js

//模塊：例如解讀css，圖片，html的轉(zhuǎn)換壓縮
  module:{
    rules: [
        {
          test:/\.css$/,
          use:[
            {loader:'style-loader'},
            {loader:'css-loader'}
          ]
        }
    ]
  }

然后打包就成功了


image.png
css 圖片處理

我們?cè)赾ss里給body一個(gè)背景圖

body{
    background-color: red;
    background-image: url(../image/img2.png);
}

然后打包，會(huì)報(bào)錯(cuò)，依然是缺少解析圖片的loader，file-loader 和 url-loader

image.png

解釋下：
file-loader：解決引用路徑的問(wèn)題，拿background樣式用url引入背景圖來(lái)說(shuō)，我們都知道，webpack最終會(huì)將各個(gè)模塊打包成一個(gè)文件，因此我們樣式中的url路徑是相對(duì)入口html頁(yè)面的，而不是相對(duì)于原始css文件所在的路徑的。這就會(huì)導(dǎo)致圖片引入失敗。這個(gè)問(wèn)題是用file-loader解決的，file-loader可以解析項(xiàng)目中的url引入（不僅限于css），根據(jù)我們的配置，將圖片拷貝到相應(yīng)的路徑，再根據(jù)我們的配置，修改打包后文件引用路徑，使之指向正確的文件。

url-loader：如果圖片較多，會(huì)發(fā)很多http請(qǐng)求，會(huì)降低頁(yè)面性能。這個(gè)問(wèn)題可以通過(guò)url-loader解決。url-loader會(huì)將引入的圖片編碼，生成dataURl。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個(gè)文件就能訪問(wèn)圖片了。當(dāng)然，如果圖片較大，編碼會(huì)消耗性能。因此url-loader提供了一個(gè)limit參數(shù)，小于limit字節(jié)的文件會(huì)被轉(zhuǎn)為DataURl，大于limit的還會(huì)使用file-loader進(jìn)行copy。

安裝url-loader和file-loader

npm install url-loader file-loader -S

配置 webpack.config.js

{
    test: /\.(png|jpg|gif|jpeg)/,
    use: [{
        loader: 'url-loader',
        options:
        {
            limit: 100000 //小于100kb 轉(zhuǎn)base64
        }
    }]
}

注意：只需配置 url-loader 即可，因?yàn)閡rl-loader封裝了file-loader，

插件

html-webpack-plugin （用于模板生成html，自動(dòng)引入output文件）

該插件會(huì)自動(dòng)生成html入口文件并自動(dòng)引入 出口 文件
安裝

npm install html-webpack-plugin -S

配置 webpack.config.js
1、導(dǎo)入插件

var HtmlWebpackPlugin = require('html-webpack-plugin')

2、實(shí)例化插件

//插件
    plugins:[
        new HtmlWebpackPlugin({
            template:'index.html',//本地模板文件的位置
            minify:{
              removeAttributeQuotes:true,//去除引號(hào)
              removeComments:true,//去除注釋
              removeEmptyAttributes:true,//去除空屬性
              collapseWhitespace:true//去除空格
            }
        })
    ]
image.png

我們將html 的引用 出口文件 的script標(biāo)簽刪掉在打包

<html>
<head>
    <title></title>
</head>
<body>
    <div class="warp"></div>
</body>
</html>

此時(shí)dist目錄會(huì)多出一個(gè)index.html 文件，并且此時(shí)已自動(dòng)引入了出口文件，并進(jìn)行了代碼壓縮、去除多余引號(hào)、去除注釋、去除空屬性、去除空格一系列操作

<!DOCTYPE html><html><head><title></title></head><body><div class=warp></div><script type=text/javascript src=main.js></script></body></html>

注意：如果不配置template 那么生成的index.html將沒(méi)有 內(nèi)容(<div class="warp"></div>)僅僅只是

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type=text/javascript src=main.js></script>
</body>
</html>
html的img

我們?cè)趇ndex.html中引用一個(gè)圖片打包后路徑是不對(duì)的，這時(shí)就需要 html-withimg-loader，來(lái)解決引用圖片路徑不對(duì)問(wèn)題，
安裝 html-withimg-loader

npm install html-withimg-loader -S

配置webapck.config.js loader

{
    test: /\.html$/,
    use: [{
        loader: 'html-withimg-loader'
    }]
}

最后打包html圖片路徑問(wèn)題已解決

加載字體

那么，像字體這樣的其他資源如何處理呢？file-loader 和 url-loader 可以接收并加載任何文件，然后將其輸出到構(gòu)建目錄。這就是說(shuō)，我們可以將它們用于任何類型的文件，包括字體

  • 下載奧森圖標(biāo) 放入 src目錄下


    image.png
  • 入口文件 index.js中引入 font-awesome.css
import './css/font-awesome.css';

index.html里 添加個(gè)圖標(biāo)

<i class='fa fa-shield'></i>

  • 打包這時(shí)候會(huì)報(bào)錯(cuò)，無(wú)法識(shí)別字體，需要配置loader


    image.png

  • 配置webapck.config.js

{
    test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
    use: [
        'url-loader'
    ]
}

最后打包一切ok，

提取css

如果不想 css 打包在js里可以使用插件 extract-text-webpack-plugin

  • 安裝
npm install extract-text-webpack-plugin@next -S

注意 webpack4.x要加 @naxt

  • 入口文件index.js導(dǎo)入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin')
  • 配置webapck.config.js
  1. 初始化插件 傳入一個(gè)參數(shù) 打包后的css文件名
//插件
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html', //本地模板文件的位置
            minify: {
                removeAttributeQuotes: true, //去除引號(hào)
                removeComments: true, //去除注釋
                removeEmptyAttributes: true, //去除空屬性
                collapseWhitespace: true //去除空格
            }
        }),
        new ExtractTextPlugin("css/[name].css"),
    ]
  1. 重新配置 css-loader 和 style-loader
{
    test: /\.css$/,
    use: ExtractTextPlugin.extract(
    {
        fallback: "style-loader",
        use: [
        {
            loader: 'css-loader',
            options:
            {
                minimize: true,  //啟用壓縮
            }
        }],
        publicPath: "../" //解決打包后 背景圖片路徑不對(duì)問(wèn)題
    })
}

ES6語(yǔ)法裝換 babel
核心：
babel-core
功能：
babel-loader
babel-preset-env
babel-preset-react

  • 下載
npm install babel-core babel-loader babel-preset-env babel-preset-react -S

babel配置有兩種方式
v1：配置webpack.config.js

{
    test: /(\.jsx|\.js)$/,
    use:
    {
        loader: "babel-loader",
        options:
        {
            presets: ["env", 'react']
        }
    },
  //不需要轉(zhuǎn)換的目錄
    exclude: /node_modules/
}

v2：根目錄新建.babelrc文件

{
    "presets":['env','react']
}

同時(shí) webapck.conifg.js去除對(duì)應(yīng)代碼

{
    test: /(\.jsx|\.js)$/,
    use:
    {
        loader: "babel-loader",
    },
  //不需要轉(zhuǎn)換的目錄
    exclude: /node_modules/
}
?著作權(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)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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