[TOC]

WebPack

中文文檔

局部

開發(fā)模式安裝
npm install webpack webpack-cli --save-dev
yarn add webpack webpack-cli -D (-D換--save-dev也可以)
使用
./node_modules/.bin/webpack --version
npm 5以后可以
npx webpack --version
npx create-react-app 快速創(chuàng)建react app

全局

npm install webpack -g
yarn global add @vue/cli

可以在page.json 中配置scripts

"scripts": {
build: "webpack"
}

執(zhí)行npm run build

輸入輸出

新建

webpack.config.js文件

const path = require('path')
// console.log(path.resolve())
// console.log(path.join(__dirname,'./dist'))
const config={
    entry: './src/index.js', //入口位置
    output: {
        filename: "bundle.js",
        path: path.join(__dirname,'./dist')//出口位置
    }
}

module.exports = config

path 模塊不能識別編譯，需要給webstorm加入配置
引入node path模塊 打開設(shè)置

image-20200204112325193.png

圖像 2020-2-4，上午11.27.jpg

增加的目錄為

/Users/zhangzhuang/.nvm/versions/node/v10.16.0/lib/node_modules/npm/node_modules

path.join() 相當(dāng)于拼接
__dirname 該項目的絕對路徑
path.resolve() 該項目的絕對路徑

Loaders

js 處理資源文件使用

安裝

yarn add css-loader style-loader -D

webpack.config.js

module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader','sass-loader']//順序不能換，倒序執(zhí)行
            }
        ]
    }

ssas支持

 yarn add sass-loader -D

webpack.config.js

rules: [
    {
        //sass-loader node-sass兩個依賴都要安裝
        test: /\.(scss|sass)$/,
        use: ['style-loader','css-loader','sass-loader']
    }
]

plugins

支柱功能，使WebPackage可擴展。

yarn add html-webpack-plugin -D

webpack.config.js

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

const config = {
   ...
    plugins: [
        new HtmlWebpackPlugin({
                filename: 'index.html',
                template: 'template.html'
            }
        )
    ]
}

module.exports = config

熱模塊替換

webpack-dev-server配合使用,提供一個服務(wù)更新瀏覽器。

yarn add webpack-dev-server -D

package.json

  "scripts": {
    ...
    "watch": "webpack --watch",
    "hot": "webpack-dev-server"
  }

webpackage.config.js

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

...
    devServer: {
        contentBase: path.join(__dirname, "src"),
        compress: true,
        port: 9006,
        hot: true
    },
    plugins: [
        new HtmlWebpackPlugin({
                filename: 'index.html',
                template: 'template.html'
            }
        ),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]

...

總結(jié)

Mode

模式

webpack.config.js

const config = {
    mode: 'production'
    ....
}

基礎(chǔ)使用 ，根據(jù)mode切host地址

index.js

if (process.env.NODE_ENV === 'development'){
    console.log('baseurl is localhost')
} else {
    console.log('baseurl is zz.com')
}

兩個模式生成的bundle.js 是不同的

babel 配置css壓縮

yarn add babel-loader  @babel/core @babel/preset-env  @babel/plugin-transform-runtime -D

yarn add @babel/runtime -S

.babelrc 只在軟件包中有用

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

src/ a.js

export default () =>{
    console.log("come from module a")
}

index.js

import afn from './a'
afn()

成功引入

clean-webpack-plugin

清除文件

 yarn add clean-webpack-plugin  -D 

https://github.com/johnagan/clean-webpack-plugin

copy-webpack-plugin

 yarn copy-webpack-plugin -D

webpack.config.js

const CopyWebpackPlugin = require ('copy-webpack-plugin')
plugins: [
       ...
        new CopyWebpackPlugin([
            {
                from: path.join(__dirname,'assets'),
                to: 'assets'
            }
        ])
    ]

css和js壓縮

https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production

yarn add terser-webpack-plugin optimize-css-assets-webpack-plugin mini-css-extract-plugin -D

• Terser-webpack-plugin 壓js
• optimize-css-assets-webpack-plugin 壓cs
• mini-css-extract-plugin 支持頭部引用

webpack.config.js

const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};