webpack

webpack是一個(gè)模塊打包機(jī),他把項(xiàng)目當(dāng)作一個(gè)整體，通過一個(gè)或多個(gè)給定的的主文件，webpack將從這個(gè)文件開始找到項(xiàng)目的所有依賴文件，使用loaders或plugins處理它們，最后打包成一個(gè)或多個(gè)瀏覽器可識別的js文件

安裝 webpack 依賴

yarn add webpack webpack-cli -D

配置文件 webpack.config.js

基本概念

• 模式

通過選擇 development或production之中的一個(gè)，來設(shè)置mode參數(shù)，你可以啟用相應(yīng)模式下的webpack內(nèi)置的優(yōu)化

• 入口

入口起點(diǎn)指示webpack應(yīng)該使用那個(gè)模塊，來作為構(gòu)建其內(nèi)部依賴圖的開始。

• 出口

output屬性告訴webpack在那里輸出它創(chuàng)建的bundles,以及如何命名這些文件，默認(rèn)值./dist。基本上，整個(gè)應(yīng)用程序結(jié)構(gòu)，都會被編譯到你指定的輸出路徑的文件夾中。你可以通過在配置中指定一個(gè)output字段

• loader

loader讓webpack能夠處理那些非javaScript文件(webpack自身只理解javaScript)。loader可以將所有的文件轉(zhuǎn)換webpack能夠處理的有效模塊。

• plugins

loader被用于轉(zhuǎn)換某些類型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務(wù)。插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量。

基礎(chǔ)配置

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './index.js' // 打包入口文件
  output: {
    path: path.resolve(__dirname,'dist') //項(xiàng)目打包基礎(chǔ)目錄，
    filename: 'main.js'
  },
}

配置開發(fā)服務(wù)器

yarn add webpack-dev-server -D

{
devServer: {
port: 3000,
progress:true,
compress: true,
contentBase: './dist',

}
}

自動生成html模版

html-webpack-plugin

new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      minify: {
        removeAttributeQuotes: true
        //collapseWhitespace: true
      }
      // hash: true
    }),

css處理

• 識別css模塊
• 引入link標(biāo)簽
• 瀏覽器兼容前綴

yarn add css-loader style-loader postcss-loader autoprefixer

module: {
rules: [
  {
     test: /\.css$/i,
     use: [style-loader, 'css-loader', 'postcss-loader']
  },
]
}

新建postcss.config.js

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

處理less

yarn add less-loader

module: {
rules: [
  {
     test: /\.less$/i,
     use: [style-loader, 'css-loader', 'postcss-loader','less-loader']
  },
]
}

es6 轉(zhuǎn) es5

yarn add babel-loader @babel/core @babel/preset-env -D
 {
        test: /\.js$/i,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-class-properties']
          }
        }
      }

es7 支持

yarn add '@babel/polyfill' // 不要-D
import ('@babel/polyfill')

配置 eslint

yarn add eslint eslint-loader
{
  test:'/\.css$/i',
  use: {
    loader: 'eslint-loader',
    option: {
      enforce: 'pre' // pre
    }
  }


}

// 根目錄下新建.eslintrc.json

webpack 打包圖片

1、在js中創(chuàng)建圖片來引入

yarn add file-loader
{
test: /\.(png|jpg\gif)/i,
loader: 'file-loader '
}

2、在css中引入背景圖片

background:url("./logo.png") //css-loder自動轉(zhuǎn)換

3、<img src="">

yarn add html-withimg-loader -D

{
test: /\..html\$/i,
loader: 'html-withimg-loader'
}

刪除原先目錄

yarn add clean-wbpack-plugin -D
new CleanWbpackPlugin('./dist')

webpack跨域問題

devServer: {
    port: 3000,
    progress: true,
    contentBase: './dist',
    open: true,
    compress: true, //壓縮,
    proxy: {
      '/api': 'www.baidu.com'
      // https://segmentfault.com/a/1190000016199721?utm_source=tag-newest
    }
  },