webpack 4 入坑及爬坑記錄

一、安裝

在本機安裝好nodejs的基礎上，window操作系統，cmd打開控制台，添加到創建的文件夾下

npm init //初始化npm

npm install webpack --save-dev

正常等待安裝完成，安裝完成可能會出現一些警告

新建項目，編輯css,js,html，運行webpack,會提示安裝webpack-cli,安裝完成之后，可能會一直報錯

暴力解決方法：

刪除原先安裝的，不管是全局還是局部安裝的，都刪掉

npm install webpack webpack-cli --save-dev

執行，運行

npx webpack

二、配置

在 webpack 4 中，可以無須任何配置使用，然而大多數項目會需要很復雜的設置，所以可以新建配置文件，便於操作

新建配置文件

webpack.config.js

const path = require('path');
 module.exports = { mode: 'production', //指明開發壞境是生產者模式還是開發模式，不寫的話，運行有一堆警告，看着尷尬癌要出來 entry: { //入口 app: './src/demo.js', 
 com: './src/js/com.js' //簡而言之，要打包壓縮的那個js的路徑；多個入口使用方法添加占位符 }, devtool: 'inline-source-map', //指定資源 output: { //出口，輸入的 filename: 'js/[name].min.js', //名稱位置  path: path.resolve(__dirname, 'dist'), //輸出的路徑，
 //publicPath: 'http://cdn....'指定絕對路徑地址
 } } 

基本的配置，應該就是這樣，執行npx webpack --config webpack.config.js就會得到想要的結果，打包之后的js生成在dist/js目錄里

 注意一下：path: path.resolve(__dirname, 'dist'), //輸出的路徑，我看API上必須是要絕對路徑，通過path.resolve來自動解析路徑就可以的，詳情請戳這里https://www.webpackjs.com/configuration/resolve/

可以同時修改npm的package.json文件

{ "name": "webpackdemo", "version": "4.14.0", "description": "webpack test", "private": true, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "webpack": "webpack --config webpack.config.js --colors",  //這里這里可以添加webpack的各種參數，我只加了兩個config color "watch": "webpack --watch" //自動打包 },

保存，就可以直接運行 npm run webpack

還有這些參數，都可以添加進去

--watch //監聽自動打包
--config //指定配置  指定文件名
-p //壓縮混淆腳本，這個非常非常重要！
-d //生成map映射文件，告知哪些模塊被最終打包到哪里了其中的
--progress //顯示進度條
--color //添加顏色

三、插件

1、loader 允許你直接在 JavaScript 模塊中 import CSS文件！//將css一起和js打包在一起

npm install css-loader style-loader --save-dev

npm run webpack

有三種方法使用：

（1)、還是在webpack.config.js里面配置

// module: {
    //     rules: [
    //       { 
    //           test: /\.css$/,   正則表達式判斷是否是后綴名為css
    //           use: [
    //           { loader: 'style-loader' }, 打包之后插入到style中
    //           {
    //             loader: 'css-loader',
    //             options: {
    //               modules: false 是否打包成具有唯一hash值的css，最好設置為false，不然寫的類名雖然保證了唯一性但是不方便調用
    //             }
    //           }
    //         ]
    //       }
    //     ]
 //    }

(2)、直接在導入的import中使用

(3)、cmd控制台中直接

webpack --module-bind 'css=style-loader!css-loader'

最后都會打包出來css在html頁面的style中

2、HtmlWebpackPlugin  //打包后自動生成對應的html文件

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

配置webpack.config.js

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

module.exports = {
	mode: 'production',
	entry: {
		main: './src/js/main.js',
		com: './src/js/com.js'
	},
	devtool: 'inline-source-map',
	plugins: [
        new HtmlWebpackPlugin({
        	template: 'index.html', //在膜版基礎上
	      	filename: 'out-index.html',         //模板名稱
	      	//inject: 'head/標簽名稱', //嵌入到html哪個標簽里面
	      	//data: new Date(), //插入時間
	      	//minify:{},壓縮html文件
	        title: 'Output html', //插入生成html的title
	        // chunks:['demo']指定包含的js模塊
        })
    ],
	output: {
		filename: 'js/[name].min.js',
		path: path.resolve(__dirname, 'dist')
	}

	
}

 最后生成out-index.html在dist文件夾下，還有更多參數及插件，請戳https://www.npmjs.com/package/html-webpack-plugin

3、MiniCssExtractPlugin //單獨打包分離出css，針對webpack4+的插件，反正我試了無數種方法，就這個插件可以，還有extract-text-webpack-plugin@next版本據說也闊以，可是我沒有弄出來

npm install mini-css-extract-plugin --save-dev

同樣配置webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
	mode: 'production',
	entry: {
		main: './src/js/main.js',
		com: './src/js/com.js',
		common: './src/css/common.css'
	},
	devtool: 'inline-source-map',
	plugins: [
        new MiniCssExtractPlugin({
            filename: 'common.min.css'
        })
    ],
	output: {
		filename: 'js/[name].min.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
	    rules: [
	      {
	        test: /\.css$/,
	        use: [
	          {
	            loader: MiniCssExtractPlugin.loader,
	          },
	          "css-loader"
            ]
	      }
	    ]
    }

	
}

 輸出common.min.css在dist文件夾下。暫時記錄如此，后續更進