初始化項(xiàng)目

npm init -y
npm install webpack webpack-cli -D

在創(chuàng)建src目錄和dist目錄

配置文件webpack.config.js

基本配置

const path=require('path');
module.exports={
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename:'bundle.js' // 打包后的文件名也可配置成動(dòng)態(tài)的 '[name].[hash:8].js',hash長(zhǎng)度可自由設(shè)置最長(zhǎng)為20位
    },
    module: {},
    plugins: [],
    devServer: {}
}

entry：配置入口文件的地址
output：配置出口文件的地址
module：配置模塊,主要用來(lái)配置不同文件的加載器
plugins：配置插件
devServer：配置開(kāi)發(fā)服務(wù)器

package.json文件配置

"build": "webpack --mode development" // 生產(chǎn)環(huán)境(production),開(kāi)發(fā)環(huán)境（development）

編譯css文件

npm install stlye-loader css-loader -D

配置文件webpack.config.js

module: {
      rules: [
        {
          test:/\.css$/,
          // css-loader 用來(lái)解析 css 文件中的url路徑
          // style-loader 可以把css文件變成 style 標(biāo)簽插入head中
          // 多個(gè)loader 是有順序要求的,從右往左轉(zhuǎn)換
          loader:["style-loader","css-loader"] // 使用use和loader都可以loader
        }
      ]
    },

配置devServer便于開(kāi)發(fā)

npm install webpack-dev-server -D

    // 配置靜態(tài)資源服務(wù)器硬萍，可以用來(lái)預(yù)覽打包后的項(xiàng)目
    devServer: {
      contentBase: './dist', // 靜態(tài)文件根目錄
      host: 'localhost', // 配置host私杜，也可寫(xiě)成IP的形式
      port: 8080, // 配置端口號(hào)
      compress: true, //是否啟用gzip壓縮
    }

package.json文件配置 (--oepn,自動(dòng)打開(kāi)瀏覽器預(yù)覽)

"dev": "webpack-dev-server --open --mode development" 

安裝html-webpack-plugin

npm install html-webpack-plugin -D

在配置文件中引入html-webpack-plugin

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

在plugins中配置

 plugins: [
      // 此插件可以自動(dòng)生成HTML文件
      new HtmlWebpackPlugin({
        minify:{ // 是否進(jìn)行壓縮
          removeAttributeQuotes: true, //移除屬性的引號(hào)
        },
        template: './src/index.html', // html模板
        filename: 'index.html', // 生成的HTML文件名
        hash: true,// 會(huì)在引入的 js 中加入hash避免緩存
        title: '歡迎使用webpack' //生成的HTML文件插入的 title內(nèi)容
      })
    ],

配置多入口,將entry配置成數(shù)組形式或?qū)ο笮问?/h3>

 entry: ['./src/index.js','./src/base.js'],
 entry: {
index: './src/index.js',
base: './src/base.js'
},

清除多次打包產(chǎn)生的重復(fù)文件

npm i clean-webpack-plugin -D

const CleanWebpackPlugin = require('clean-webpack-plugin')

new CleanWebpackPlugin([path.join(__dirname,'dist')]) // 先將dist清空再編譯

多頁(yè)面可以配置多個(gè)HtmlWebpackPlugin

entry: {
index: './src/index.js',
base: './src/base.js'
},

      new HtmlWebpackPlugin({
        minify:{ // 是否進(jìn)行壓縮
          removeAttributeQuotes: true, //移除屬性的引號(hào)
        },
        chunks:['index'],//在產(chǎn)出的html文件里引入哪些代碼塊,分離js文件
        template: './src/index.html', // html模板
        filename: 'index.html', // 生成的HTML文件名
        hash: true,// 會(huì)在引入的 js 中加入hash避免緩存
        title: '歡迎使用webpack' //生成的HTML文件插入的 title內(nèi)容
      }),
      new HtmlWebpackPlugin({
        minify:{ // 是否進(jìn)行壓縮
          removeAttributeQuotes: true, //移除屬性的引號(hào)
        },
        chunks:['base'],//在產(chǎn)出的html文件里引入哪些代碼塊 
        template: './src/index.html', // html模板
        filename: 'base.html', // 生成的HTML文件名
        hash: true,// 會(huì)在引入的 js 中加入hash避免緩存
        title: '歡迎使用webpack' //生成的HTML文件插入的 title內(nèi)容
      }),

抽離公共js文件

entry: {
      index: './src/index.js',
      base: './src/base.js',
      vendor: './src/common.js' // 抽離公共js文件
    },

chunks:['index','vendor'],//在產(chǎn)出的html文件里引入哪些代碼塊,分離js文件,在各自的代碼塊加入公共js

webpack解析圖片模塊

npm i file-loader url-loader -D

{
          // file-loader(將文件轉(zhuǎn)化為二進(jìn)制數(shù)據(jù))是解析圖片地址烂斋，把圖片從原位置拷貝到目標(biāo)位置并且修改原原引用地址
          test:/\.(png|jpg|jpeg|gif|svg|bmp)$/,
          use:{
            loader: "file-loader",
            outputPath: '/images' // 指定打包圖片的輸出目錄
          },
        },

解析img標(biāo)簽引入的圖片

npm i html-withimg-loader -D

{
   // file-loader(將文件轉(zhuǎn)化為二進(jìn)制數(shù)據(jù))是解析圖片地址袭灯，把圖片從原位置拷貝到目標(biāo)位置并且修改原原引用地址
      test:/\.(html|htm)$/,
      use:"html-withimg-loader",
}

將小尺寸圖片轉(zhuǎn)為base64格式

{
          // file-loader(將文件轉(zhuǎn)化為二進(jìn)制數(shù)據(jù))是解析圖片地址，把圖片從原位置拷貝到目標(biāo)位置并且修改原原引用地址
          // url-loader 可以將比較小的文件轉(zhuǎn)換為base64格式內(nèi)嵌到HTML 中減少HTTP請(qǐng)求,是file-loader 的增強(qiáng)版包含了file-loader的功能
          test:/\.(png|jpg|jpeg|gif|svg|bmp)$/,
          use:[
            // {
            //   loader: "file-loader",
            //   options:{
            //     outputPath: 'images/' // 指定打包圖片的輸出目錄
            //   }
            // },
            {
              loader: "url-loader",
              options:{
                limit: 10*1024,
                outputPath: 'images/'
              }
            },
          ]
        },

解析less和scss(需分開(kāi)安裝酣溃，一起安裝容易報(bào)錯(cuò))

npm i less less-loader -D
npm i node-sass sass-loader -D

webpack配置

      {
          test:/\.less$/,
          // css-loader 用來(lái)解析 css 文件中的url路徑
          // style-loader 可以把css文件變成 style 標(biāo)簽插入head中
          // 多個(gè)loader 是有順序要求的,從右往左轉(zhuǎn)換
          loader:["style-loader","css-loader","less-loader"]
        },
        {
          test:/\.scss$/,
          // css-loader 用來(lái)解析 css 文件中的url路徑
          // style-loader 可以把css文件變成 style 標(biāo)簽插入head中
          // 多個(gè)loader 是有順序要求的,從右往左轉(zhuǎn)換
          loader:["style-loader","css-loader","scss-loader"]
        },

抽離公共css代碼

npm install --save-dev mini-css-extract-plugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 引入這個(gè)插件
const devMode = process.env.NODE_ENV !== 'production'

plugins: [
  
]

修改loader配置
原配置

      {
          test:/\.css$/,
          // css-loader 用來(lái)解析 css 文件中的url路徑
          // style-loader 可以把css文件變成 style 標(biāo)簽插入head中
          // 多個(gè)loader 是有順序要求的,從右往左轉(zhuǎn)換
          loader:["style-loader","css-loader"]
        },
        {
          test:/\.scss$/,
          // css-loader 用來(lái)解析 css 文件中的url路徑
          // style-loader 可以把css文件變成 style 標(biāo)簽插入head中
          // 多個(gè)loader 是有順序要求的,從右往左轉(zhuǎn)換
          loader:["style-loader","css-loader","sass-loader"]
        },

修改后

        {
          test:/\.css$/,
          // css-loader 用來(lái)解析 css 文件中的url路徑
          // style-loader 可以把css文件變成 style 標(biāo)簽插入head中
          // 多個(gè)loader 是有順序要求的,從右往左轉(zhuǎn)換
          //這個(gè)插件先用css-loader 處理一下css文件
          loader:cssExtract.extract({
            use:["css-loader"]
          })
        },
        {
          test:/\.(sa|sc|c)ss$/,
          // css-loader 用來(lái)解析 css 文件中的url路徑
          // style-loader 可以把css文件變成 style 標(biāo)簽插入head中
          // 多個(gè)loader 是有順序要求的,從右往左轉(zhuǎn)換
          use: [
            devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader',
            'sass-loader',
          ],
        },

css自動(dòng)添加瀏覽器前綴

npm i postcss-loader autoprefixer -D

    {
          test:/\.css$/,
          // css-loader 用來(lái)解析 css 文件中的url路徑
          // style-loader 可以把css文件變成 style 標(biāo)簽插入head中
          // 多個(gè)loader 是有順序要求的,從右往左轉(zhuǎn)換
          //這個(gè)插件先用css-loader 處理一下css文件
          // use: [ MiniCssExtractPlugin.loader,"css-loader"]
          use: [ "style-loader","css-loader","postcss-loader"]
        },

src目錄下新建postcss.config.js配置文件

module.exports ={
  plugins:[require('autoprefixer')]
}