從零學習搭建webpack工程(一)

傳送門： 從零學習搭建webpack工程(二)

一 、初始化項目，實現webpack打包。

一、新建文件夾webpack-tempalate，cd到當前文件夾,打開git bash 使用命令npm init -y生成 package.json。

二、安裝 wenpack，webpack-cli，執行命令npm install -D webpack webpack-cli。 package.json以下圖：

{
"name": "webpack-template",//工程項目名稱
"version": "1.0.0",//版本號
"description": "",//描述
"main": "index.js",
"scripts": {//腳本
    "test": "echo \"Error: no test specified\" && exit 1"
    },
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {//依賴 
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
    }
}
複製代碼

三、在根目錄新建文件夾src，在src下新建 index.js 文件，文件目錄

四、package.json中script添加 "dev": "webpack --mode=development"

// --mode=development--mode=production,是表示開發環境或是生產環境，生產環境下會對代碼進行壓縮。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode=production"
  }
複製代碼

五、使用命令 npm run dev，此時會在根目錄下生成文件夾dist，dist下main.js文件。main.js文件即爲src下 index文件的打包文件。

!當前版本的webpack爲4.41.2,默認入口文件爲src下的index.js，打包輸出dist下main.js。

二 、配置 wenpack.config.js

一、根目錄下新建 wenpack.config.js

module.exports = {
    entry: {//入口
    },
    output: {//出口
    },
    modules:{},//配置loaders
    mode: "development",//環境development | production
    plugins:[]
}
複製代碼

(1)、entry配置：

在src下新建 index.js, list.js 可配置多入口

entry: {
       index: `./src/index.js`,
       list: `./src/list.js`
   }
複製代碼

(2)、output配置： 在webpack.config.js中引入path ：const path = require('path')

output: {
       filename: `[name]/[name].[hash:7].js`,//文件名稱
       chunkFilename: `[id].[name].[hash:7].js`,//動態引入的JS文件會造成一個chunk，不會打包到js文件裏面
       path: path.resolve(__dirname, dist)//出口路徑
   },
複製代碼

二、配置package.json腳本script

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config webpack.config.js"
  },
複製代碼

三、執行命令 npm run dev，在dist下會生成兩個文件夾

三 、打包以前清空dist文件，須要安裝plugin：clean-webpack-plugin

一、執行命令npm install clean-webpack-plugin, package.json會新增一條

二、在webpack.config.js中添加plugin 引入clean-webpack-plugin

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

plugins: [
    new CleanWebpackPlugin()
]
複製代碼

傳送門： 從零學習搭建webpack工程(二)