webpack打包器小结（1）
================================================?
【1】intro to webpack?
官網：
webpack官網: http://webpack.github.io/
webpack3文檔(英文):? https://webpack.js.org/
webpack3文檔(中文): https://doc.webpack-china.org/
?
================================================
【2】?自動化構建工具webpack_打包js,json文件
step1、創建文件夾 mywebpack ;
step2、在mywebpack 新建 package.json ，然后編輯， 填充如下配置：
{"name": "mywebpack","version": "1.0.0" }step3、安裝webpack（?npm install webpack --save-dev ）完成后（或許還需要安裝 webpack-cli 命令如下 npm install webpack-cli --save-dev?），package.json 變成這個樣子： 且生成了一個文件?package-lock.json?
{"name": "mywebpack","version": "1.0.0","devDependencies": {"webpack": "^4.41.2"} } D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>npm install webpack-cli --save-dev npm WARN mywebpack@1.0.0 No description npm WARN mywebpack@1.0.0 No repository field. npm WARN mywebpack@1.0.0 No license field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ webpack-cli@3.3.10 added 24 packages from 22 contributors and audited 8972 packages in 19.616s found 0 vulnerabilitiesstep4、開發index.js 首頁，引入了js， css， json 文件；
目錄結構如下：
文件明細如下：
index.js?
import {multiply, mod} from './math.js' import '../css/test.css' import user from '../data/user.json' import data from "../../../webpack_test/src/data/test";document.write("hello world") document.write(multiply(2, 2, )) document.write(mod(1000, 33, )) document.write(JSON.stringify(user))math.js?
export function multiply(x, y) {return x * y }export function mod(x, y) {return x % y }test.css
body{background: blue; }#box1{width: 300px;height: 300px;background-image: url('../image/001.png'); }#box2{width: 300px;height: 300px;background-image: url('../image/002.png'); }user.json?
{"name": "zhangsan","age" :100 }step5、使用webpack打包， 如下：
打包命令如下：?webpack src/js/index.js --output-filename bundle.js --output-path dist/js --mode development??
打包結果如下：
D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>webpack src/js/index.js --output-filename bundle.js --output-path dist/js --mode development Hash: d59b081e19a4db8cdb0d Version: webpack 4.41.2 Time: 98ms Built at: 2019-11-09 11:10:41 AMAsset Size Chunks Chunk Names bundle.js 6.42 KiB main [emitted] main Entrypoint main = bundle.js [./src/css/test.css] 266 bytes {main} [built] [failed] [1 error] [./src/data/user.json] 45 bytes {main} [built] [./src/js/index.js] 243 bytes {main} [built] [./src/js/math.js] 107 bytes {main} [built]ERROR in ./src/css/test.css 1:4 Module parse failed: Unexpected token (1:4) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > body{ | background: blue; | }@ ./src/js/index.js 2:0-24錯誤信息說， 打包css文件需要css loader 加載器；
這里我們先注釋掉 引入 css文件哪一行， 再次打包，成功， bingo。如下：
D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>webpack src/js/index.js --output-filename bundle.js --output-path dist/js --mode development Hash: fc7aed1243c6e0d706d5 Version: webpack 4.41.2 Time: 100ms Built at: 2019-11-09 11:12:03 AMAsset Size Chunks Chunk Names bundle.js 5.63 KiB main [emitted] main Entrypoint main = bundle.js [./src/data/user.json] 45 bytes {main} [built] [./src/js/index.js] 246 bytes {main} [built] [./src/js/math.js] 107 bytes {main} [built]step6、打包結果如下：
step6.1 在dist文件夾下新建 index.html命令，然后引入 bundle.js , 如下：
index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>我的webpack首頁</title> </head> <body><script type="text/javascript" src="js/bundle.js"></script> </body> </html>?
================================================
【3】自動化構建工具webpack_config配置
1、寫在前面：為什么需要引入 webpack.config.js 文件？?
因為webpack的打包命令太復雜了，如 webpack src/js/entry.js --output-filename bundle.js --output-path dist/js --mode development?
而使用了 webpack.config.js 之后，只需要在命令行執行 webpack 即可。
2、webpack.config.js 如下，與package.json 放在同級目錄下：
參考官網配置：?https://webpack.docschina.org/guides/getting-started/#%E4%BD%BF%E7%94%A8%E4%B8%80%E4%B8%AA%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6
webpack.config.js// node內置的模塊用來去設置路徑的 const path = require('path');module.exports = {// 入口文件配置， 當前項目的主文件entry: './src/js/index.js',// 出口/輸出的配置output: {// 輸出的文件名filename: 'bundle.js',// 輸出文件路徑, resolve 路徑拼接path: path.resolve(__dirname, 'dist/js/')} };3、使用 webpack --mode development 進行打包，如下：
命令執行結果 D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>webpack --mode development Hash: fc7aed1243c6e0d706d5 Version: webpack 4.41.2 Time: 95ms Built at: 2019-11-09 11:31:20 AMAsset Size Chunks Chunk Names bundle.js 5.63 KiB main [emitted] main Entrypoint main = bundle.js [./src/data/user.json] 45 bytes {main} [built] [./src/js/index.js] 246 bytes {main} [built] [./src/js/math.js] 107 bytes {main} [built]================================================?
【4】?自動化構建工具webpack_打包 css 文件
剛剛沒能打包css文件，因為沒有引入css 加載器， 現在引入，如下：
可以參考官網?https://webpack.docschina.org/loaders/css-loader/?
step1：安裝css加載器，??npm install --save-dev css-loader style-loader file-loader url-loader?
D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>npm install --save-dev css-loader style-loader file-loader url-loader npm WARN mywebpack@1.0.0 No description npm WARN mywebpack@1.0.0 No repository field. npm WARN mywebpack@1.0.0 No license field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ file-loader@4.2.0 + url-loader@2.2.0 + style-loader@1.0.0 + css-loader@3.2.0 added 30 packages from 50 contributors and audited 4389 packages in 15.235s found 0 vulnerabilities補充：url-loader是對象file-loader的上層封裝，使用時需配合file-loader使用。
step2： 引入css文件，取消?index.js 的 css引入注釋；如下：?
index.js import {multiply, mod} from './math.js' import '../css/test.css' import user from '../data/user.json'document.write("hello world") document.write(multiply(2, 2, )) document.write(mod(1000, 33, )) document.write(JSON.stringify(user))step2.1、在 webpack.config.js 中引入css-loader 加載器 ， 如下：
又 css文件中引入了圖片， 而打包圖片，使用url-loader，如下：
// node內置的模塊用來去設置路徑的 const path = require('path');module.exports = {// 入口文件配置， 當前項目的主文件entry: './src/js/index.js',// 出口/輸出的配置output: {// 輸出的文件名filename: 'bundle.js',// 輸出文件路徑, resolve 路徑拼接path: path.resolve(__dirname, 'dist/js/')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192}}]}],}, };?
執行 webpack --mode development 打包， 如下：
D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>webpack --mode development Hash: 78ffadd980c422773682 Version: webpack 4.41.2 Time: 624ms Built at: 2019-11-09 12:04:20 PMAsset Size Chunks Chunk Names 97b6ad90c25f31b0314ddbfa4ef67807.png 50.5 KiB [emitted]bundle.js 20.5 KiB main [emitted] main f0551938a716cfe4c727aeba0f8c9ecd.png 96.6 KiB [emitted] Entrypoint main = bundle.js [./node_modules/css-loader/dist/cjs.js!./src/css/test.css] 653 bytes {main} [built] [./src/css/test.css] 408 bytes {main} [built] [./src/data/user.json] 41 bytes {main} [built] [./src/image/001.png] 82 bytes {main} [built] [./src/image/002.png] 82 bytes {main} [built] [./src/js/index.js] 241 bytes {main} [built] [./src/js/math.js] 107 bytes {main} [built]+ 3 hidden modules打包結果如下：
【訪問結果如下】 文字正常顯示，css正常顯示，但圖片找不到， 報404；?
補充，webpack打包圖片時，有個問題：
1、若圖片大小小于8K，則使用base64算法把圖片轉換字符串存儲（本例是存放在 bundle.js 里面 ）；
2、若圖片大于8K， 則不會生成字符串，而是以圖片形式存儲（這時，entry.js 就找不到圖片的具體位置）；
【解決方法】 在 webpack.config.js 中添加 publicPath 屬性，設置 index.html 搜索圖片的路徑；但不推薦使用這種方法， 因為帶有強制性；
添加 publichPath 屬性后的 webpack.config.js 如下：?
// node內置的模塊用來去設置路徑的 const path = require('path');module.exports = {// 入口文件配置， 當前項目的主文件entry: './src/js/index.js',// 出口/輸出的配置output: {// 輸出的文件名filename: 'bundle.js',publicPath: 'js/', // （添加publicPath屬性）設置為index.html提供資源服務的時候帶有強制性// 輸出文件路徑, resolve 路徑拼接path: path.resolve(__dirname, 'dist/js/')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192}}]}],}, };可以正常訪問。 bingo。
?
================================================?
【5】基于webpack-dev-server實現自動編譯打包（自動化構建工具webpack_熱加載實現）
可以參考官網：?https://webpack.docschina.org/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server??
also， 你可以參考我的博文：?https://blog.csdn.net/PacosonSWJTU/article/details/102983394?
具體步驟如下：
step1： 安裝webpakc-dev-server? npm install --save-dev webpack-dev-server
D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>webpack --mode development Hash: c0ef08ceddc1663b2fc1 Version: webpack 4.41.2 Time: 613ms Built at: 2019-11-09 12:23:00 PMAsset Size Chunks Chunk Names 97b6ad90c25f31b0314ddbfa4ef67807.png 50.5 KiB [emitted]bundle.js 20.5 KiB main [emitted] main f0551938a716cfe4c727aeba0f8c9ecd.png 96.6 KiB [emitted] Entrypoint main = bundle.js [./node_modules/css-loader/dist/cjs.js!./src/css/test.css] 653 bytes {main} [built] [./src/css/test.css] 408 bytes {main} [built] [./src/data/user.json] 41 bytes {main} [built] [./src/image/001.png] 82 bytes {main} [built] [./src/image/002.png] 82 bytes {main} [built] [./src/js/index.js] 241 bytes {main} [built] [./src/js/math.js] 107 bytes {main} [built]+ 3 hidden modulesD:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>npm install --save-dev webpack-dev-server npm WARN mywebpack@1.0.0 No description npm WARN mywebpack@1.0.0 No repository field. npm WARN mywebpack@1.0.0 No license field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ webpack-dev-server@3.9.0 added 204 packages from 166 contributors and audited 7911 packages in 48.761s found 0 vulnerabilitiesstep2： package.json 多了一個屬性：webpack-dev-server ；
package.json {"name": "mywebpack","version": "1.0.0","devDependencies": {"css-loader": "^3.2.0","file-loader": "^4.2.0","style-loader": "^1.0.0","url-loader": "^2.2.0","webpack": "^4.41.2","webpack-dev-server": "^3.9.0"} }直接運行 webpack-dev-server， 報錯如下：
?
step3： 在 package.json 文件下添加 scripts 屬性，修改webpack.config.js （添加devServer ） 如下：
package.json {"name": "mywebpack","version": "1.0.0","devDependencies": {"css-loader": "^3.2.0","file-loader": "^4.2.0","style-loader": "^1.0.0","url-loader": "^2.2.0","webpack": "^4.41.2","webpack-dev-server": "^3.9.0"},"scripts": {"dev": "webpack-dev-server --open"} } webpack.config.js // node內置的模塊用來去設置路徑的 const path = require('path');module.exports = {// 入口文件配置， 當前項目的主文件entry: './src/js/entry.js',// 出口/輸出的配置output: {// 輸出的文件名filename: 'bundle.js',// publicPath: 'js/', // 設置為index.html提供資源服務的時候帶有強制性（會對自動打包有影響）// 輸出文件路徑, resolve 路徑拼接path: path.resolve(__dirname, 'dist/js/'),},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192}}]}],},devServer: {contentBase: './dist/' // webpack-dev-server 默認服務于根路徑下的index.html}, };step4：再次運行命令? npm run dev?
D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>npm run dev> mywebpack@1.0.0 dev D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack > webpack-dev-server --openi ｢wds｣: Project is running at http://localhost:8080/ i ｢wds｣: webpack output is served from /js/ i ｢wds｣: Content not from webpack is served from ./dist/ i ｢wdm｣: Hash: 373307dc3fd94b391432 Version: webpack 4.41.2 Time: 1658ms Built at: 2019-11-09 12:43:49 PMAsset Size Chunks Chunk Names 97b6ad90c25f31b0314ddbfa4ef67807.png 50.5 KiB [emitted]bundle.js 377 KiB main [emitted] main f0551938a716cfe4c727aeba0f8c9ecd.png 96.6 KiB [emitted] Entrypoint main = bundle.js [0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/js/index.js 40 bytes {main} [built] [./node_modules/ansi-html/index.js] 4.16 KiB {main} [built] [./node_modules/strip-ansi/index.js] 161 bytes {main} [built] [./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built] [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built] [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built] [./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} [built] [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built] [./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built] [./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built] [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built] [./src/css/test.css] 408 bytes {main} [built] [./src/data/user.json] 41 bytes {main} [built] [./src/js/index.js] 241 bytes {main} [built] [./src/js/math.js] 107 bytes {main} [built]+ 27 hidden modules i ｢wdm｣: Compiled successfully.webpack-dev-server 會啟動一個服務器，開放8080端口訪問。?
隨便修改 index.js 中的代碼，添加一行代碼如下：
document.write("小唐")；
webpack都會自動編譯，如下：?
訪問效果：
?
================================================?
【6】添加webpack插件
1、參考官網：?https://webpack.docschina.org/plugins/html-webpack-plugin/ ；
2、下載插件：?
D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>npm install --save-dev html-webpack-plugin clean-webpack-plugin npm WARN mywebpack@1.0.0 No description npm WARN mywebpack@1.0.0 No repository field. npm WARN mywebpack@1.0.0 No license field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ clean-webpack-plugin@3.0.0 + html-webpack-plugin@3.2.0 added 56 packages from 84 contributors and audited 9120 packages in 29.171s found 0 vulnerabilities3、修改webpack.config.js 的配置，添加插件配置：
// node內置的模塊用來去設置路徑的 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // 自動生成 html 文件插件 const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清除之前打包的文件module.exports = {// 入口文件配置， 當前項目的主文件entry: './src/js/index.js',// 出口/輸出的配置output: {// 輸出的文件名filename: 'bundle.js',publicPath: 'js/', // （添加publicPath屬性）設置為index.html提供資源服務的時候帶有強制性// 輸出文件路徑, resolve 路徑拼接path: path.resolve(__dirname, 'dist/js/')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192}}]}],},devServer: {contentBase: './dist/' // webpack-dev-server 默認服務于根路徑下的index.html},plugins: [new HtmlWebpackPlugin({template: './dist/index.html'}),], };?
?
?
總結
以上是生活随笔為你收集整理的webpack打包器小结（1）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 手机卡好久没用了插上显示无服务怎么办
- 下一篇： ES6 Map对象的使用