git 创建webpack项目_Webpack入门：从安装到配置
文檔
webpack 用于編譯 JavaScript 模塊。
一旦完成安裝，你就可以通過 webpack 的 CLI 或 API 與其配合交互。
這里以入門者的角度（中文）介紹 webpack 的常用配置。當 webpack 更新后，以下細節(jié)可能有出入，但是總體的核心不變。
詳見 webpack 的 英文文檔 和 中文文檔。
基本安裝
版本信息
首先通過 npm 查看 webpack 目前的版本信息。
$ npm info webpack可以看到下面的信息：
// webpack@4.41.2 | MIT | deps: 23 | versions: 625// 可執(zhí)行文件 // 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 創(chuàng)建 package.json 后，在本地安裝。
$ mkdir webpack-demo && cd webpack-demo $ yarn init -y $ yarn add webpack webpack-cli --dev安裝成功后，項目中出現(xiàn)名為 node_modules 的文件夾和名為 yarn.lock 以及 package.json 的文件。
創(chuàng)建結(jié)構(gòu)/目錄
在根目錄下新建 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 的可執(zhí)行文件。
注意：在 Windows 系統(tǒng)中某些情況可能存在不穩(wěn)定性，比如 安裝 node 時路徑有空格等。這時需要使用第一種方法。
$ npx webpackwebpack 在當前目錄的 dist 目錄中輸出結(jié)果。此時應(yīng)有轉(zhuǎn)譯后的 main.js 文件。
這是webpack自帶的一個加載器：babel-loader實現(xiàn)的。
優(yōu)化生成方式-build
在 package.json 文件中 設(shè)置 script腳本中的 build方法。
該方法將清空dist目錄，并重新運行webpack，重新生成dist目錄和其中的文件；更加利于開發(fā)。
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實現(xiàn)這個功能，而不推薦使用插件。這是為了下面自定義不同模式的配置文件做基礎(chǔ)。
配置 configuration
這時候警告提示需要設(shè)置配置文件中的轉(zhuǎn)譯模式。需要對配置文件進行配置。
在操作之前，最好把它整成一個 git，每一步都 git。
注意：以下每一步都是在上一步的操作基礎(chǔ)上進行操作，有些相同相似的或不需要的代碼則沒有展示。請忽略代碼中的 “+”（加號表示局部增加或替換代碼）和相關(guān)注釋說明代碼。
如果你有另外的需求，最后參閱原始文檔進行配置。
路徑及模式
在根目錄下創(chuàng)建配置文件。
$ touch webpack.config.js進入配置文件，寫入以下代碼。
webpack.config.js
const path = require("path");module.exports = {// 轉(zhuǎn)譯模式： development 開發(fā)者模式 / production 產(chǎn)品模式mode: "development",// 輸入源entry: "./src/index.js",// 輸出output: {// 文件名filename: "main.js",// 輸出路徑path: path.resolve(__dirname, "dist")} };緩存需求文件名
可以設(shè)置為生成 包含 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' + }) + ],};- 執(zhí)行命令構(gòu)建命令 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'})],};注意：如果你的模板存在但內(nèi)容為空，webpack 只會生成一個只有引入外部文件鏈接的 空html文件。
模板中的內(nèi)容會覆蓋你在插件中的配置，比如說 title。
如果你想使用配置文件中的 title，請在模板中這樣寫：
<head> + <title><%= htmlWebpackPlugin.options.title %></title> </head>引入和自動生成CSS
首先在src目錄中創(chuàng)建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的作用是如果發(fā)現(xiàn)任何以.css結(jié)尾的文件名，那么就處理文件并讀到j(luò)s文件中。
- style-loader的作用是把讀到的內(nèi)容變?yōu)閔tml文件中的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文件來動態(tài)實現(xiàn)的，因此你需要在 dist 目錄里創(chuàng)建一個 web服務(wù)器 才能看到效果。
分離抽成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文件全部整合為一個文件，并且有根據(jù)引入順序來排列內(nèi)容。
預(yù)覽頁面-快速開發(fā)
使用webpack-dev-server可以設(shè)置一個簡單的web服務(wù)器，無需build即可預(yù)覽dist文件目錄下的文件，并實現(xiàn)實時重新加載。
安裝
在命令行
$ yarn add webpack-dev-server --dev配置文件
修改配置文件，告訴開發(fā)服務(wù)器在哪里查找文件：
webpack.config.js
module.exports = {entry: {app: './src/index.js',print: './src/print.js'}, + devtool: 'inline-source-map', + devServer: { + contentBase: './dist' + }};添加腳本命令
添加一個script腳本可以直接運行開發(fā)服務(wù)器。
package.json
{"script": { + "start": "webpack-dev-server --open"} }"- -open" 表示自動打開瀏覽器，可以刪除或保留。
只需運行
$ yarn start或
$ npm run start即可在 localhost:8080 創(chuàng)建服務(wù)。
小小盛的博客?eden-sheng.cn 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的git 创建webpack项目_Webpack入门：从安装到配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我的世界精美别墅教程
- 下一篇： 项目放到git_Git的基本使用(二)