github代碼地址
通過 npm script 運(yùn)行 webpack
在package.json文件中運(yùn)行的腳本徒像，默認(rèn)是可以讀取到 node_modules/.bin/下面的所以命令的通過npm run build運(yùn)行打包
原理：模塊的局部安裝會在node_modules/.bin目錄下創(chuàng)建軟鏈接
在package.json的scripts中添加一條腳本命令：? "build":"webpack",
??{
??? "name": "webpack.1.2",
??? "version": "1.0.0",
??? "description": "通過 npm script 運(yùn)行 webpack",
??? "main": "index.js",
??? "scripts": {
??? ? "build":"webpack",
??? ? "test": "echo \"Error: no test specified\" && exit 1"
??? },
??? "keywords": [],
??? "author": "",
??? "license": "ISC",
??? "devDependencies": {
??? ? "webpack": "^4.35.3",
??? ? "webpack-cli": "^3.3.5"
??? }
??}
通過在終端運(yùn)行npm run build 即可完成打包項(xiàng)目夺英。
### webpack 核心概念之entry用法
在webpack.config.js文件中：
1. 單入口：entry是一個字符串。
??module.exports = {
????entry:'./src/file.js'
??}
1. 多入口：entry是一個對象
??module.exports = {
????entry: {
??????index: './src/index.js',
??????search: './src/search.js'
????}
??}
?webpack 核心概念之Output的用法
1. Output用來告訴webpack如何將編譯后的文件輸出到磁盤
????module.exports = {
????? entry: './src/index.js',
????? output: {
????? ? path: path.join(__dirname, 'dist'),? // 單入口只要配置path和filename這兩個參數(shù)
????? ? filename: 'bundle.js'
????? },
????? mode:'production'
????}
1. Output多入口配置
????module.exports = {
????? entry: {
????? ? index: './src/index.js',
????? ? search: './src/search.js'
????? },
????? output: {
????? ? filename: '[name].js',? // 通過占位符確保文件名稱的唯一性
????? ? path: __dirname + '/dist'
????? },
????? mode:'production'
????}
?webpack 核心概念之loaders的用法
webpack的開箱即用只支持js和json兩種文件類型，通過loaders去支持其他文件類型瞳遍，并且將他們轉(zhuǎn)化成有效的模塊，并且可以添加到依賴圖中，loaders本身是一個函數(shù)，接受源文件作為參數(shù)滑肉，返回轉(zhuǎn)換后的結(jié)果。
常見的loaders
| 名稱 | 描述 |
| :----: | :----: |
| babel-loader | 轉(zhuǎn)換ES6ES7等新特性語法 |
| css-loader | 支持.css文件的加載和解析 |
| less-loader | 將less轉(zhuǎn)換為css |
| ts-loader | 將ts轉(zhuǎn)換為js |
| file-loader | 進(jìn)行圖片摘仅，字體等的打包 |
| raw-loader | 將文件以字符串的形式導(dǎo)入 |
| thread-loader | 多進(jìn)程打包js和css |
??module.exports = {
??? entry: './src/index.js',
??? output: {
??? ? path: path.join(__dirname, 'dist'),
??? ? filename: 'bundle.js'
??? },
??? mode: 'production',
??? module: {
??? ? rules: [
??? ? ? {
??? ? ? ? test: /\.txt$/, use: 'raw-loader'? ? // test 指定匹配規(guī)則 use 指定使用的loader名稱
??? ? ? }
??? ? ]
??? }
??}
?webpack 核心概念之plugins的用法
插件用于bundle文件的優(yōu)化靶庙，資源管理和環(huán)境變量注入，作用于整個構(gòu)建過程
常見的plugins
| 名稱 | 描述 |
| :----: | :----: |
| CommonsChunkPlugin | 將chunks相同的模塊代碼提取成公共js文件 |
| CleanWebpackPlugin | 清理構(gòu)建項(xiàng)目 |
| ExtractTextWebpackPlugin | 將chunks相同的模塊代碼提取成公共js文件 |
| CommonsChunkPlugin | 將css從bundle文件里提取成獨(dú)立的css文件 |
| CopyWebpackPlugin | 將文件或者文件夾拷貝到構(gòu)建的輸出目錄 |
| HtmlWebpackPlugin | 創(chuàng)建html文件去承載輸出的bundle |
| UglifyjsWebpackPlugin | 壓縮js |
| ZipWebpackPlugin | 將打包出的資源生成一個Zip包 |
??module.exports = {
??? entry: './src/index.js',
??? output: {
??? ? path: path.join(__dirname, 'dist'),
??? ? filename: 'bundle.js'
??? },
??? mode: 'production',
??? module: {
??? ? rules: [
??? ? ? {
??? ? ? ? test: /\.txt$/, use: 'raw-loader'? ? // test 指定匹配規(guī)則 use 指定使用的loader名稱
??? ? ? }
??? ? ]
??? },
??? plugins: [
??? ? new HtmlWebpackPlugin({
??? ? ? template: './src/index.html'? //? 創(chuàng)建html文件去承載輸出的bundle
??? ? })
??? ]
??}
### webpack核心概念之mode的用法
<b> 概念：</b>Mode用于指定當(dāng)前的構(gòu)建環(huán)境是：production 娃属， development 六荒，還是 none 。設(shè)置mode的值矾端，可以使用webpack在相應(yīng)階段的內(nèi)置函數(shù)恬吕，默認(rèn)值為production（webpack4.x以后才有的概念），如果是productin须床，webpack會默認(rèn)開啟一些在生產(chǎn)階段才使用的內(nèi)置功能，如下參考：
| 選項(xiàng) | 描述 |
| :----: | :----: |
| development | 設(shè)置process.env.NODE_ENV的值為development渐裂，開啟NameChunksPlugin和NameModulesPlugin |
| production | 設(shè)置process.env.NODE_ENV的值為production豺旬，開啟FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和TerserPlugin |
| none | 不開啟任何優(yōu)化選項(xiàng) |
