## webpack的學習筆記 ### webpack起步 webpack是基于node的 ### 使用 ``` npm install webpack -g // 全局安裝webpack //首次使用的問題 // webpack 源文件 --output 目的文件的路徑 --mode development webpack src/main.js --output dist/build.js --mode development ``` ### webpack的配置文件 ``` // webpack的配置對象 const path = require('path') // 啟用熱更新 第2步 const webpack = require('webpack') // 導入在內存中生成的HTML頁面的組件 const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { //表示要使用webpack打包哪一個文件 entry: path.join(__dirname, './src/main.js'), // 輸出的目錄 output: { path: path.join(__dirname, './dist'), filename: 'build.js' }, devServer: { open: true, //自動打開瀏覽器 port: 3000, //啟動瀏覽器的端口 contentBase: 'src', //指定的托管的目錄 hot: true //啟動熱更新的第一步 }, plugins: [ new webpack.HotModuleReplacementPlugin(), //new一個熱更新的模塊 // 在內存中創建一個HTML的模板的頁面 new HtmlWebpackPlugin({ // 指定模板的頁面， 會在內存中根據這個頁面來生成頁面 template: path.join(__dirname, './src/index.html'), // 指定生成的頁面的名稱 filename: 'index.html' }) /*new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }),*/ ] } ``` ### webpack-dev-server的使用 #### 安裝 ``` //安裝 npm install webpack-dev-server --save-dev ``` #### 配置（package.json） ``` { "name": "webpack-4", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev1": "webpack-dev-server --open --port 3000 --contentBase src --hot", //第一種配置方式 第二種見webpack的配置文件 "dev": "webpack-dev-server", "build": "webpack --mode production" }, "author": "", "license": "ISC", "dependencies": { "jquery": "^3.3.1" }, "devDependencies": { "webpack": "^4.26.1", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.10" } } ``` ``` // dev-server 的參數的第一種配置方式的參數說明 webpack-dev-server --open --port 3000 --contentBase src --hot ``` * --open --port 3000 : 自動打開瀏覽器的3000端口 * --contentBase src：自動打開src下的HTML的首頁 * --hot: 實現瀏覽器的無刷新自動更新 ### html-webpack-plugin的使用 #### 安裝 ``` //安裝 npm install html-webpack-plugin --D ``` #### 作用 1. 自動在內存中根據指定的頁面生成一個內存的頁面 2. 自動將打包好的build.js添加到頁面中去 #### 配置 ``` plugins: [ new webpack.HotModuleReplacementPlugin(), //new一個熱更新的模塊 // 在內存中創建一個HTML的模板的頁面 new HtmlWebpackPlugin({ // 指定模板的頁面， 會在內存中根據這個頁面來生成頁面 template: path.join(__dirname, './src/index.html'), // 指定生成的頁面的名稱 filename: 'index.html' }) /*new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }),*/ ] ``` ### loader的使用 webpack默認只能處理js的文件 #### style-loader css-loader ``` npm i style-loader css-loader -D ``` ``` /*配置第三方的模塊的匹配的規則*/ module:{ rules: [ {test: /\.css$/, use:['style-loader', 'css-loader']}, //配置處理css的第三方loader ] } ``` webpack處理第三方文件的順序 * 如果不是js的文件，就會在配置文件中尋找合適的loader * 在調用loader的順序是從后向前進行調用的 * 當最后一個loader調用完畢后再交給web pack打包 loader 的調用順序