什么是webpack?

webpack 可以看做是是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴(lài)關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。

webpack的優(yōu)點(diǎn)

自帶模塊化(commonjs規(guī)范)

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

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

自帶服務(wù)器，服務(wù)器基于Node（webpack-dev-server）

webpack初識(shí)

webpack共有4個(gè)版本分別是：1.x 、2.x 、3.x 、4.x版本 , 目前前端最流行的兩大框架React和Vue中經(jīng)常會(huì)用到webpack , 由此可見(jiàn)webpack使用的廣泛程度

1.安裝全局環(huán)境

npm install -g webpack webpack-cli

2.創(chuàng)建項(xiàng)目，初始化package.json文件

npm init

3.安裝項(xiàng)目依賴(lài)的webpack

npm install --save-dev webpack webpack-cli

4.項(xiàng)目根目錄創(chuàng)建兩個(gè)文件夾src和dist

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

5.編寫(xiě)代碼Hello Webpack

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

6.在項(xiàng)目根目錄增加配置文件webpack.config.js

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

執(zhí)行 :

webpack

7.編寫(xiě)模塊化代碼

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' //生產(chǎn)模式 mode: 'development'//開(kāi)發(fā)模式

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

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

改變運(yùn)行方案

npm run build //運(yùn)行生產(chǎn)環(huán)境并打包 npm start //運(yùn)行開(kāi)發(fā)環(huán)境

10.錯(cuò)誤調(diào)試信息

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

devtool:提示方式

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

不同的錯(cuò)誤提示方式的運(yùn)行速度不同 , 適用場(chǎng)景也不同

11.webpack服務(wù)器

1.全局安裝

npm install -g webpack-dev-server

2.項(xiàng)目依賴(lài)安裝

npm install -D webpack-dev-server

3.運(yùn)行webpack服務(wù)器

webpack-dev-server

4.快捷執(zhí)行方案

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

5.修改服務(wù)器配置

配置文件中配置：

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

命令行配置：

webpack-dev-server --progress

12.Loaders

1.ES6 轉(zhuǎn) ES5

1.安裝：

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

2.增加配置

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

3.增加一個(gè)配置文件.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環(huán)境構(gòu)建

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.編寫(xiě)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.關(guān)于安裝依賴(lài)
--save-dev(-D)：項(xiàng)目依賴(lài)，是不存在外部引用關(guān)系
--save(-S)：項(xiàng)目依賴(lài)，存在CDN

6.引入css文件

1.安裝依賴(lài)：

npm install -D css-loader style-loader

2.增加配置webpack.config.js

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

3.運(yùn)行:

npm start

7.引入圖片
1.安裝依賴(lài)：

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.運(yùn)行：

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 自身的多數(shù)功能都使用這個(gè)插件接口。這個(gè)插件接口使 webpack 變得極其靈活。這里簡(jiǎn)單介紹兩個(gè)常用插件:

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

npm install -D html-webpack-plugin

2.增加配置:

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

2.自動(dòng)打開(kāi)瀏覽器
1.安裝：

npm install -D open-browser-webpack-plugin

2.增加配置：

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。