當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

git 创建webpack项目_Webpack入门：从安装到配置

發布時間：2023/12/19 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 git 创建webpack项目_Webpack入门：从安装到配置小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文檔

webpack 用于編譯 JavaScript 模塊。

一旦完成安裝，你就可以通過 webpack 的 CLI 或 API 與其配合交互。

這里以入門者的角度（中文）介紹 webpack 的常用配置。當 webpack 更新后，以下細節可能有出入，但是總體的核心不變。

詳見 webpack 的英文文檔和中文文檔。

基本安裝

版本信息

首先通過 npm 查看 webpack 目前的版本信息。

$ npm info webpack

可以看到下面的信息：

// webpack@4.41.2 | MIT | deps: 23 | versions: 625// 可執行文件 // bin: webpack// 所有版本 // dist-tags: // latest: 4.41.2 legacy: 1.15.0 next: 5.0.0-beta.9 // webpack-2: 2.7.0 webpack-3: 3.12.0

我們使用默認的最新版本 webpack4。這里推薦使用 yarn 代替 npm。

初始化安裝

新建（進入）項目，初始化 yarn 創建 package.json 后，在本地安裝。

$ mkdir webpack-demo && cd webpack-demo $ yarn init -y $ yarn add webpack webpack-cli --dev

安裝成功后，項目中出現名為 node_modules 的文件夾和名為 yarn.lock 以及 package.json 的文件。

創建結構/目錄

在根目錄下新建 src 目錄和 index.js 文件。

$ mkdir src $ touch src/index.js $ echo 'console.log('success')' >> src/index.js

啟動 webpack

使用本地路徑

我們的 webpack 因為是裝在本地，所以需要用路徑來使用。

$ ./node_modules/.bin/webpack

使用 npx 命令

使用 npx 來啟動 webpack，會自動在當前目錄中尋找 webpack 的可執行文件。

注意：在 Windows 系統中某些情況可能存在不穩定性，比如安裝 node 時路徑有空格等。這時需要使用第一種方法。

$ npx webpack

webpack 在當前目錄的 dist 目錄中輸出結果。此時應有轉譯后的 main.js 文件。

這是webpack自帶的一個加載器：babel-loader實現的。

優化生成方式-build

在 package.json 文件中設置 script腳本中的 build方法。

該方法將清空dist目錄，并重新運行webpack，重新生成dist目錄和其中的文件；更加利于開發。

package.json

Mac/Linux

{"script": { + "build": "rm -rf dist; webpack"} }

Windows

{"script": { + "build": "rm -rf dist && webpack"} }

使用命令

這樣你以后可以用下面的方法取代npx命令。

$ yarn build

或

$ npm run build

用插件清理dist目錄

你也可以不用build方法，而是安裝一個清理插件clean-webpack-plugin。工作原理和build方法相似。

安裝插件：

$ yarn add clean-webpack-plugin --dev

配置插件：

webpack.config.js

+ const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {entry: {app: './src/index.js',print: './src/main.js'},plugins: [ + new CleanWebpackPlugin(['dist'])]};

這樣在你每次運行 npx webpack 時，只會重新生成新的文件而看不到舊的文件。

注意：最好使用配置script腳本的方法來使用build實現這個功能，而不推薦使用插件。這是為了下面自定義不同模式的配置文件做基礎。

配置 configuration

這時候警告提示需要設置配置文件中的轉譯模式。需要對配置文件進行配置。

在操作之前，最好把它整成一個 git，每一步都 git。

注意：以下每一步都是在上一步的操作基礎上進行操作，有些相同相似的或不需要的代碼則沒有展示。請忽略代碼中的 “+”（加號表示局部增加或替換代碼）和相關注釋說明代碼。

如果你有另外的需求，最后參閱原始文檔進行配置。

路徑及模式

在根目錄下創建配置文件。

$ touch webpack.config.js

進入配置文件，寫入以下代碼。

webpack.config.js

const path = require("path");module.exports = {// 轉譯模式： development 開發者模式 / production 產品模式mode: "development",// 輸入源entry: "./src/index.js",// 輸出output: {// 文件名filename: "main.js",// 輸出路徑path: path.resolve(__dirname, "dist")} };

緩存需求文件名

可以設置為生成包含 MD5哈希的字符串插入文件名用于 HTTP緩存。

webpack.config.js

module.exports = {output: { + filename: "main.[contenthash].js"}};

自動生成HTML

webpack 可以使用插件來自動生成 HTML。

在命令行安裝插件：

$ yarn add html-webpack-plugin

安裝后修改配置文件

webpack.config.js

+ const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { + plugins: [ + new HtmlWebpackPlugin({//html 標題 + title: 'Output Management' + }) + ],};

執行命令構建命令 yarn build 可以在dist目錄中生成一個 index.html文件。
該文件會自動引入你項目中的外部文件
如果你在外部文件名中引入了 MD5哈希字符串，那么每次 build 的同時 html文件也會自動更新。
引入js會在body標簽的最后面加入 script鏈接。
引入 css 可以配置為以 style標簽形式插入還是 link標簽插入。

使用模板來生成html

你也可以使用項目中寫好的 html模板來讓 webpack 生成新的 html 。

該模板要放在 src 目錄下面的 assets 文件夾中。

$ mkdir src/assets $ touch src/assets/index.html

在插件的 html 配置中再加入一行：

webpack.config.js

module.exports = {plugins: [new HtmlWebpackPlugin({ + template: 'src/assets/index.html'})],};

注意：如果你的模板存在但內容為空，webpack 只會生成一個只有引入外部文件鏈接的空html文件。

模板中的內容會覆蓋你在插件中的配置，比如說 title。

如果你想使用配置文件中的 title，請在模板中這樣寫：

引入和自動生成CSS

首先在src目錄中創建css文件，并在index.js文件中用import方法引入。

$ touch src/default.css $ echo "body{background: red;}" >> src/default.css $ echo "import './default.css'" >> src/index.js

安裝加載器

$ yarn add css-loader style-loader --dev

修改配置文件。

css-loader的作用是如果發現任何以.css結尾的文件名，那么就處理文件并讀到js文件中。
style-loader的作用是把讀到的內容變為html文件中的style標簽并放入head標簽中。

webpack.config.js

module.exports = {entry: './src/index.js',output: {filename: 'main.js',path: path.resolve(__dirname, 'dist')}, + module: { + rules: [ + { + test: /.css$/, + use: [ + 'style-loader', + 'css-loader' + ] + } + ] + }};

使用 build 方法后在 dist 目錄的 index.html 文件中插入 style 標簽。

這是通過js文件來動態實現的，因此你需要在 dist 目錄里創建一個 web服務器才能看到效果。

分離抽成css文件

使用mini-css-extract-plugin來打包css文件，把css樣式從js文件中提取到單獨的css文件中。

$ yarn add mini-css-extract-plugin --dev

配置文件

+ const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = {plugins: [ + new MiniCssExtractPlugin({ + // Options similar to the same options in webpackOptions.output + // all options are optional + filename: '[name].[contenthash].css', + chunkFilename: '[id].[contenthash].css', + ignoreOrder: false, // Enable to remove warnings about conflicting order + }),],module: {rules: [{test: /.css$/,use: [ + { + loader: MiniCssExtractPlugin.loader, + options: { + // you can specify a publicPath here + // by default it uses publicPath in webpackOptions.output + publicPath: '../', + hmr: process.env.NODE_ENV === 'development', + }, + },'css-loader',],},],},};

使用build方法后，將會在dist目錄里重新生成一個帶有MD5哈希字符串的main.css文件，并且在html文件中以link標簽方式從外部引入。

此方法會把所有通過import方式引入的CSS文件全部整合為一個文件，并且有根據引入順序來排列內容。

預覽頁面-快速開發

使用webpack-dev-server可以設置一個簡單的web服務器，無需build即可預覽dist文件目錄下的文件，并實現實時重新加載。

安裝

在命令行

$ yarn add webpack-dev-server --dev

配置文件

修改配置文件，告訴開發服務器在哪里查找文件：

webpack.config.js

module.exports = {entry: {app: './src/index.js',print: './src/print.js'}, + devtool: 'inline-source-map', + devServer: { + contentBase: './dist' + }};

添加腳本命令

添加一個script腳本可以直接運行開發服務器。

package.json

{"script": { + "start": "webpack-dev-server --open"} }

"- -open" 表示自動打開瀏覽器，可以刪除或保留。

只需運行

$ yarn start

或

$ npm run start

即可在 localhost:8080 創建服務。

小小盛的博客?eden-sheng.cn 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的git 创建webpack项目_Webpack入门：从安装到配置的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：我的世界精美别墅教程
下一篇：项目放到git_Git的基本使用(二)