webpack基本配置學習

webpack安裝

自己簡單的使用了下，先npm init 初始化了一下環境，然後安裝webpack

npm init -y 
npm install webpack webpack-cli --save-dev

npm init -y中-y既是yes的意思，個人感覺相當於默認配置，直接生成package.json文件。

簡單的webpack配置

在package.json的同級目錄下創建一個webpack.config.js文件，寫入了一下內容：

'use strict'
const path = require('path')
module.exports = {
	entry: {//入口
		index: './src/index.js',
	},
	output: {//出口
		path: path.join(__dirname,'dist'),
		filename: 'index.js'
	},
	module: {//loader
		rules: [
			
		]
	},
	plugins: [],//插件
	mode:'production'//環境
}

entry代表打包入口，output需要指定輸出地址及打包出來的文件名，loader讓webpack能夠去處理那些非JavaScript文件(webpack 自身只理解 JavaScript)，plugins代表插件入口，所有插件都在這裏配置，mode指開發環境。
然後在package.json文件下的script節點添加一項配置 “build”: “webpack”，再運行 npm run build 就可以方便地打包了。

{
  "name": "csdn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"build": "webpack"
  },

loader

loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換爲 webpack 能夠處理的有效模塊，然後你就可以利用 webpack 的打包能力，對它們進行處理。
解析ES6,需要用到babel-loader。

npm i @babel/core @babel/preset-env babel-loader -D
//再在根目錄創建 ``.babelrc` 文件，增加以下內容
{
    "presets": [
        "@babel/preset-env",
    ]
}

接着在webpack.config.js文件module中添加

module: {
	rules: [
		{
			test: /.js$/,
			use: 'babel-loader'
		},
	 ]
}

rules集合的每個元素都是一個文件類型的配置信息：test是一個正則，用來匹配文件後綴名；use表示此loader名稱。
可以使用 loader 告訴 webpack 加載 CSS 文件，或者將 TypeScript 轉爲 JavaScript。爲此，首先安裝相對應的 loader：

npm install --save-dev css-loader
npm install --save-dev ts-loader
//webpack.config.js
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

webpack加載圖片

npm i url-loader -D
//webpack.config.js
{
    test: /.(jpg|png|gif|jpeg)$/,
    use: [{
        loader:'url-loader',
        options: {
            limit:160000,
            name: 'imgs/[name].[hash].[ext]'
        }
    }]
}

limit是指圖片大小上限，單位是字節，如果圖片大小小於這個值，就會被打包爲base64格式，否則就仍是圖片。

插件plugins

插件目的在於解決 loader 無法實現的其他事。
基本用法拿HtmlWebpackPlugin這個插件來模擬下，這個插件可以自動生成基本的html頁面。首先安裝：

npm install --save-dev html-webpack-plugin

在webpack.config.js文件中添加一個HtmlWebpackPlugin常量，引用此插件，然後在plugins節點，加上此插件實例。

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        index: './src/index.js',
    },
    output: {
        path: path.join(__dirname,'dist'),
        filename: 'index.js'
    },
    module: {
        rules: [..]
    }
    plugins: [new HtmlWebpackPlugin()],
    mode: 'production',
}

webpack熱更新

熱更新的意思就是可以在編輯器上修改代碼的同時，在瀏覽器上看到同步更新效果。
先安裝webpack-dev-server依賴

npm i webpack-dev-server -D

在package.json添加配置

{
  "name": "csdn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"build": "webpack",
	"dev": "webpack-dev-server --open"
  },

然後在webpack.config.js中添加配置，先聲明一個常量webpack

const webpack = require('webpack');

再添加一個插件到plugins節點下的數組裏

new webpack.HotModuleReplacementPlugin()

最後再添加一個與plugins同級的devServer配置，其中contentBase表示此熱更新打包是針對dist文件裏的內容，hot:true表示開啓了熱更新狀態。

devServer: {
	contentBase: './dist',
	hot: true
},

清理輸出文件

清理 /dist 文件夾:在每次構建前清理 /dist 文件夾,這樣我們的dist文件不會冗餘。
安裝clean-webpack-plugin

npm install clean-webpack-plugin --save-dev

然後在webpack.config.js中添加配置，先聲明一個常量CleanWebpackPlugin

const {CleanWebpackPlugin} = require('clean-webpack-plugin');

再添加一個插件到plugins節點下的數組裏

new CleanWebpackPlugin(),

mode

mode這個配置參數用來指定當前的運行環境的，這個配置是webpack4提出來的，它有三個值：“production” | “development” | “none”，production就是生產環境，即最終部署環境；development是開發環境；none即不指定環境因素，默認是production。

補充

全局安裝

-g ||- -global: 其中參數-g的含義是代表安裝到全局環境裏面，包安裝在Node安裝目錄下的node_modules文件夾中，全局安裝後可以供命令行(command line)使用，用戶可以在命令行中直接運行該組件包支持的命令。

本地安裝

- - save-dev: 其中參數–save-dev的含義是代表把你的安裝包信息寫入package.json文件的devDependencies字段中，包安裝在指定項目的node_modules文件夾下。
- - save： 使用命令 --save 或者說不寫命令 --save ,都會把信息記錄到 dependencies 中；dependencies 中記錄的都是項目在運行時需要的文件；
devDependencies 中記錄的是項目在開發過程中需要使用的一些文件，在項目最終運行時是不需要的；也就是說我們開發完成後，最終的項目中是不需要這些文件的