基礎(chǔ)文件配置

在安裝webpack之前你需要先安裝Node.js

• node -v可以查看當(dāng)前安裝的node版本
• 要想使用webpack指令，先用npm install webpack webpack-cli --save-dev指令進(jìn)行全局安裝
• 當(dāng)前項(xiàng)目安裝webpack npm install webpack webpack-cli --save-dev（yarn add webpack webpack-cli -D）掖棉，webpack從4開(kāi)始项贺，webpack本身和cli就分離開(kāi)了
• webpack的三種使用方式：
  1.npx webpack
  2.node_modules/.bin/webpack
  3.在package.json的scripts添加"build":"node_modules/.bin/webpack"谐区，然后執(zhí)行npm run build命令

1.創(chuàng)建一個(gè)目錄，并且切換到目錄下面
mkdir webpack-demo && cd webpack-demo
2.npm初始化并本地安裝webpack
下面這個(gè)指令會(huì)在本地生成一個(gè)package.json的文件
npm init -y
然后執(zhí)行npm install webpack --save-dev安裝webpack開(kāi)發(fā)依賴(lài)完箩。
3.在webpack-demo目錄下創(chuàng)建對(duì)應(yīng)的目錄和文件
src目錄用來(lái)存放源文件mkdir src && cd src
創(chuàng)建一個(gè)個(gè)入口文件index.jstouch index.js
創(chuàng)建3個(gè)模塊touch moudel1.js module2.js module3.js
4.index.js文件內(nèi)容

import module_1 from './module1'
import module_2 from './module2'
import module_3 from './module3'
module_1()
module_2()
module_3()

5.module1.js文件內(nèi)容

export default function module_1() {
console.log("這是module_1模塊")
}

6.module2.js文件內(nèi)容

export default function module_2() {
console.log("這是module_2模塊")
}

7.module3.js文件內(nèi)容

export default function module_3() {
console.log("這是module_3模塊")
}

8.現(xiàn)在鹿霸，需要返回到項(xiàng)目的根目錄，也就是webpack-demo目錄下泪电，新建一個(gè)配置文件
touch webpack.config.js
9.在webpack.config.js中寫(xiě)配置內(nèi)容
在項(xiàng)目的根目錄下創(chuàng)建一個(gè)dist文件般妙，作為配置的輸出路徑，app.js是webpack打包運(yùn)行后自動(dòng)生成的

const path = require('path')
// 導(dǎo)入處理路徑的模塊
module.exports = {
    // 導(dǎo)出一個(gè)配置對(duì)象相速，將來(lái)webpack在啟動(dòng)的時(shí)候碟渺，會(huì)默認(rèn)來(lái)查找webpack.config.js，并讀取這個(gè)文件中導(dǎo)出的配置對(duì)象突诬，來(lái)進(jìn)行打包處理
    entry: './src/index.js',    // 項(xiàng)目入口文件
    output: {   // 配置輸出選項(xiàng)
        path: path.resolve(__dirname, 'dist'),  // 配置輸出的路徑苫拍，當(dāng)前的位置為_(kāi)_dirname，拼接上dist旺隙，形成一個(gè)絕對(duì)路徑绒极，然后再拼上下面的filename，形成項(xiàng)目的輸出文件
        filename: 'my-first-webpack-bundle.js'   //配置輸出的文件名
    }
}

10.找到根目錄下package.json文件蔬捷，在script后的對(duì)象中垄提，添加內(nèi)容

"dev": "./node_modules/.bin/webpack"

11.npm run dev

mode設(shè)置

當(dāng)我們?cè)陧?xiàng)目中最初使用npm run build的時(shí)候，命令行工具中會(huì)警告我們沒(méi)有設(shè)置mode周拐，所以會(huì)自動(dòng)使用production模式铡俐，所以我們可以在webpack的配置文件webpack.config.js中設(shè)置modemode:'production'或者是development，正常情況下妥粟，development打包出來(lái)的文件會(huì)大很多高蜂。
mode的使用場(chǎng)景：
比如我們?cè)谀硞€(gè)js文件中設(shè)置以下代碼

if (process.env.NODE_ENV  === 'development') {
    console.log('base is localhost')
}else{
    console.log('base is imoccom')
}

根據(jù)webpack的配置文件中mode的設(shè)置，會(huì)打包出來(lái)上面的js語(yǔ)句中對(duì)應(yīng)的代碼

使用html-webpack-plugin插件配置啟動(dòng)頁(yè)面

這個(gè)插件就是幫我們自動(dòng)生成html文件并且自動(dòng)引入打包好的js文件

1. 運(yùn)行npm i html-webpack-plugin --save安裝到開(kāi)發(fā)依賴(lài)
2. 修改webpack.config.js配置文件如下：

    // 導(dǎo)入處理路徑的模塊
    var path = require('path');
    // 導(dǎo)入自動(dòng)生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        entry: './src/index.js',
        output: { 
            path: path.resolve(__dirname, 'dist'),
            filename: 'my-first-webpack.bundle.js' 
        },
        plugins:[ // 添加plugins節(jié)點(diǎn)配置插件
            new htmlWebpackPlugin({
                //在這個(gè)插件內(nèi)部罕容，可以指定模版和自定義生成的文件名
                template:'src/index.html',
                //加了template選項(xiàng)备恤，就會(huì)在這個(gè)模板的基礎(chǔ)上把打包好的js文件加入到這里面中
                filename:'main.html'//自動(dòng)生成的HTML文件的名稱(chēng)
            })
        ]
    }

有了上面兩個(gè)配置后，這個(gè)插件幫助生成一個(gè)main.html锦秒，并且是基于template:'src/index.html'生成的

配置webapck支持babel

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

@babel/runtime的安裝只是為了支持本地開(kāi)發(fā)的運(yùn)行環(huán)境露泊，所以使用-S進(jìn)行安裝就可以了。
接下來(lái)是修改配置文件.babelrc

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

接下來(lái)去webpack.config.js文件的module的rules中添加規(guī)則

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

這樣的話(huà)旅择，再次打包運(yùn)行惭笑，會(huì)發(fā)現(xiàn)剛才安裝的babel應(yīng)用成功了
接下來(lái)掩飾安裝一個(gè)插件，用來(lái)復(fù)制靜態(tài)文件進(jìn)制定的位置
yarn add clean-webpack-plugin copy-webpack-plugin -D
在webpack.config.js文件中添加如下代碼：

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

在plugins中去new一下

new CleanWebpackPlugin()
new CopyWebpackPlugin([{
    from:'path.join(__dirname,'assets')',
    to:'assets'
}])

然后npm run build就可以自動(dòng)當(dāng)前項(xiàng)目的assets文件夾直接放到dist中去了

使用webpack-dev-server插件實(shí)現(xiàn)實(shí)時(shí)打包構(gòu)建

webpack自帶了webpack --watch指令，如果
webpack-dev-server插件提供了一個(gè)簡(jiǎn)單的 web 服務(wù)器沉噩，并且能夠?qū)崟r(shí)重新加載(live reloading)捺宗。
1.安裝webpack-dev-server

npm install webpack-dev-server --save-dev

增加package.json配置文件如下：

"start": "webpack-dev-server",

在終端運(yùn)行命令：

npm start

這個(gè)命令是利用了webpack-dev-server將項(xiàng)目打包到內(nèi)存中，而npm run dev是將項(xiàng)目打包到dist文件夾中川蒙，項(xiàng)目上線(xiàn)時(shí)直接把dist中的文件部署到服務(wù)器中就可以蚜厉，打包到內(nèi)存中的好處是可以實(shí)現(xiàn)實(shí)時(shí)更新。
命令啟動(dòng)后畜眨，就可通過(guò)瀏覽器的對(duì)應(yīng)接口對(duì)項(xiàng)目進(jìn)行預(yù)覽昼牛。
2.讓webpack自動(dòng)給我們打開(kāi)服務(wù)器地址
在webpack.config.js中添加配置

devServer:{
    open: true
}

其中open:true 表示自動(dòng)打開(kāi)瀏覽器
3.修改服務(wù)器端口
在webpack.config.js中添加配置項(xiàng)目

devServer:{
    open: true,
    port: 8090
}

其中port后面給了個(gè)自定義端口
4.設(shè)置默認(rèn)訪(fǎng)問(wèn)目錄，如果不設(shè)置訪(fǎng)問(wèn)目錄康聂，則系統(tǒng)會(huì)默認(rèn)訪(fǎng)問(wèn)項(xiàng)目根目錄

devServer:{
    open: true,
    port: 8090,
    contentBase: './dist'
}

零配置使用webpack4.x

1.安裝webpack
webpack的安裝方式可以分為全局安裝和局部安裝贰健，全局安裝需要加 -g

 npm install webpack -g

不過(guò)這種方式并不推薦，我們需要直接安裝在項(xiàng)目本地, 注意：webpack4.x版本安裝需要安裝webpack-cli
進(jìn)入到自己的項(xiàng)目目錄恬汁，我這里項(xiàng)目目錄為webpack-demo, 進(jìn)入到目錄伶椿，執(zhí)行命令，npm init 初始化項(xiàng)目
webpack-cli@3.1.2

npm install webpack  webpack-cli -D

2.簡(jiǎn)單打包實(shí)例
在項(xiàng)目目錄下新建src目錄氓侧，在src目錄下分別建立index.js 和 module_a.js文件
index.js里的內(nèi)容

let a = require("./module_a")
console.log(a)

module_a.js里的內(nèi)容

module.exports = "hello worldＰ！甘苍！"

3.運(yùn)行打包

npx webpack
//可以添加上生產(chǎn)模式
npx webpack --mode development

npx是npm里內(nèi)置的一個(gè)包執(zhí)行器尝蠕，需要npm 版本5.2.0以上支持，因此载庭，請(qǐng)查看版本號(hào)是否支持
用npx都不用在webpack.config.js添加dev配置了
webpack4中mode分三種：“-- production(生產(chǎn)環(huán)境)”,"--development(開(kāi)發(fā)環(huán)境)","--none(不使用前兩個(gè)默認(rèn)的配置)"看彼，上面的每一種模式都對(duì)應(yīng)著一種配置。
在實(shí)際開(kāi)發(fā)過(guò)程中可以設(shè)置mode來(lái)在我們自定義配置的基礎(chǔ)上 加上 mode提供給我們的配置囚聚。
打包后在dist目錄下會(huì)生成一個(gè)main.js的文件

使用webpack自定義配置

在項(xiàng)目目錄下新建 webpack.config.js, webpack是基于node的 遵循commonjs規(guī)范靖榕，在配置文件中需要使用module.exports導(dǎo)出內(nèi)容，配置文件主要包括以下幾個(gè)模塊

module.exports = {
    //入口配置
    entry: '',
    //出口配置
    output: '',
    //模塊配置
    module: {},
    //插件配置
    plugins: {},
    //模式配置顽铸，開(kāi)發(fā)模式還是生產(chǎn)模式
    mode:'',
    //開(kāi)發(fā)服務(wù)器配置
    devServer: {},
    //解析配置
    resolve: {}
}

簡(jiǎn)單配置：

const path = require("path")
module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.css/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(jpg|png|gif|bmp)/,
                use: [
                    loader: "url-loader",
                    options: {
                        limit: 10240
                    }
                ]
            }
        ]
    }
}