什么是webpack?

webpack 可以看做是是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。

webpack的優點

自帶模塊化(commonjs規范)

編譯功能：可以將es6 代碼轉換為es5 ,將 jsx代碼轉換為es5 , typescript代碼轉換為javascript,less代碼轉換為css

gulp所做的事情，webpack都可以做到

自帶服務器，服務器基于Node（webpack-dev-server）

webpack初識

webpack共有4個版本分別是：1.x 、2.x 、3.x 、4.x版本 , 目前前端最流行的兩大框架React和Vue中經常會用到webpack , 由此可見webpack使用的廣泛程度

1.安裝全局環境

npm install -g webpack webpack-cli

2.創建項目，初始化package.json文件

npm init

3.安裝項目依賴的webpack

npm install --save-dev webpack webpack-cli

4.項目根目錄創建兩個文件夾src和dist

src : 存放源碼文件
dist : 存放打包之后的文件

5.編寫代碼Hello Webpack

app.js:document.write("Hello Webpack");

6.在項目根目錄增加配置文件webpack.config.js

const path = require('path');module.exports = {entry:"./src/app.js",output:{path: path.resolve(__dirname, 'dist'),filename:"bundle.js"}}

執行 :

webpack

7.編寫模塊化代碼

app.js:

var hello = require("./hello.js"); document.getElementsByTagName("body")[0].appendChild(hello());

demo.js:

module.exports = function(){var divs = document.createElement("div");divs.textContent = "文本信息"; return divs; }

8.mode模式

mode: 'production' //生產模式 mode: 'development'//開發模式

9.快捷配置,在package.json文件中配置

"scripts": {"build":"webpack","start":"webpack"}

改變運行方案

npm run build //運行生產環境并打包 npm start //運行開發環境

10.錯誤調試信息

生成錯誤信息文件 , 配置webpack.config.js文件 , 添加

devtool:提示方式

常用的提示方式有eval,source-map , hidden-source-map , inline-source-map , eval-source-map , cheap-source-map , cheap-module-source-map等

不同的錯誤提示方式的運行速度不同 , 適用場景也不同

11.webpack服務器

1.全局安裝

npm install -g webpack-dev-server

2.項目依賴安裝

npm install -D webpack-dev-server

3.運行webpack服務器

webpack-dev-server

4.快捷執行方案

"scripts": {"build": "webpack","start": "webpack-dev-server" }

5.修改服務器配置

配置文件中配置：

devServer:{contentBase: path.join(__dirname, "dist"),host: "0.0.0.0",port: 8081 }

命令行配置：

webpack-dev-server --progress

12.Loaders

1.ES6 轉 ES5

1.安裝：

npm install --save-dev babel-loader @babel/core @babel/preset-env

2.增加配置

{test:/.js$/,exclude:/node_modules/,loader:"babel-loader" }

3.增加一個配置文件.babelrc

{"presets": ["@babel/preset-env"] }

4.編碼操作

app.js:

import * as Ele from "./demo" document.getElementsByTagName("body")[0].appendChild(Ele.demo());

demo.js:

export function demo(){var divs = document.createElement("div");divs.textContent = "文本信息!!!"; return divs; }

5.參考地址：https://babeljs.io/setup#installation

2.React環境構建

1.安裝：

npm install --save-dev @babel/preset-react npm install --save react react-dom

2.修改.babelrc配置文件

{"presets": ["@babel/preset-env","@babel/preset-react"] }

3.修改配置文件webpack.config.js

由于React的后綴名可以是js也可以是jsx

{test:/.(js|jsx)$/,exclude:/node_modules/,loader:"babel-loader" }

4.編寫React代碼了:( VSCode great Icons)

app.js:

import React from "react" import ReactDOM from "react-dom" class Hello extends React.Component{render(){return (<div>Hello</div>)} } ReactDOM.render(<Hello />,document.getElementById("root"));

PS:如果要修改后綴名，記得修改：entry:"./src/app.jsx"

5.關于安裝依賴
--save-dev(-D)：項目依賴，是不存在外部引用關系
--save(-S)：項目依賴，存在CDN

6.引入css文件

1.安裝依賴：

npm install -D css-loader style-loader

2.增加配置webpack.config.js

{test:/.css$/,loader:"style-loader!css-loader" }

3.運行:

npm start

7.引入圖片
1.安裝依賴：

npm install -D url-loader

2.增加配置webpack.config.js

{test:/.(png|jpg|gif|jpeg|svg)$/,loader:"url-loader" }

3.修改代碼

import Logo from "./images/logo.jpg" <img src={ Logo } alt="404" />

4.運行：

npm start

8.編譯Less
1.安裝：

npm install --save-dev less less-loader

2.添加配置文件

{test:/.less$/,loader:"style-loader!css-loader!less-loader" }

13.插件:plugin

webpack 有著豐富的插件接口(rich plugin interface)。webpack 自身的多數功能都使用這個插件接口。這個插件接口使 webpack 變得極其靈活。這里簡單介紹兩個常用插件:

1.HTML模板插件
1.安裝：

npm install -D html-webpack-plugin

2.增加配置:

new htmlPlugin({template:"./src/index.temp.html" })

2.自動打開瀏覽器
1.安裝：

npm install -D open-browser-webpack-plugin

2.增加配置：

new openBrowserPlugin({url:"http://localhost:8080" })

總結

以上是生活随笔為你收集整理的webpack代理配置打包后接口404_webpack 从零开始的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。