webpack4(01)

時間 2019-12-12

標籤 webpack4 webpack 简体版

原文原文鏈接

安裝

前提條件

在開始以前，請確保安裝了 Node.js 的最新版本。使用 Node.js 最新的==長期支持版本==(LTS - Long Term Support)，是理想的起步。使用舊版本，你可能遇到各類問題，由於它們可能缺乏 webpack 功能以及/或者缺乏相關 package 包。javascript

本地安裝 or 全局安裝

全局安裝

如下的 NPM 安裝方式，將使 webpack 在全局環境下可用：html

npm install --global webpack

==不推薦全局安裝 webpack。這會將你項目中的 webpack 鎖定到指定版本，而且在使用不一樣的 webpack 版本的項目中，可能會致使構建失敗==。java

全局安裝

要安裝最新版本或特定版本，請運行如下命令之一：node

npm install --save-dev webpack
npm install --save-dev webpack@<version>

使用 webpack 4+ 版本，你還須要安裝 ==CLI(命令行接口)==,爲了更合適且方便地使用配置，能夠在配置文件中中對 webpack 進行配置。CLI 中傳入的任何參數會在配置文件中映射爲對應的參數。webpack

npm install --save-dev webpack-cli

起步

首先咱們建立一個目錄，初始化 npm，而後在本地安裝 webpack， webpack-cli：git

mkdir webpack-demo && cd webpack-demo
npm init -y //初始化package.json
npm install webpack webpack-cli --save-dev

運行如下命令github

npx webpack

npx 是npm 5.2新增的命令，具體的就能夠查看阮老師的文檔，連接在這裏。運行以後會出現以下錯誤web

ERROR in Entry module not found: 
Error: Can't resolve './src' in 'C:\Users\dullwinnie\Desktop\webpack-demo'

從 webpack4 開始，再也不必須定義 entry point(入口點) ：它將默認爲 ./src/index.js，如今咱們將建立如下目錄結構、文件和內容：npm

projectjson

webpack-demo
    package.json
+   index.html
+   /src
+       index.js

index.js

console.log('qzy');

再次運行 npx webpack,成功後就能夠在當前的根目錄中獲得打包的文件夾,也就是dist文件夾,而且裏面包含了main.js。在文件的末尾咱們是能夠發現咱們所寫的js代碼的。細心的朋友可能發現了，剛纔的命令行中報了一個警告

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or
'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

webpack4 能夠0配置，可是此時的配置很弱，因此開發中咱們經常須要本身配置。

使用配置文件

webpack.config.js

新建一個webpack.config.js文件

webpack-demo
        package.json
+       webpack.config.js    
        index.html
        /src
            index.js

webpack.config.js

const path = require('path');
module.exports = {
    mode: 'development', // development 開發環境  、production 生成環境
    entry: './src/index.js', // 須要打包文件的入口
    output: {
        filename: 'bundle.js',//打包後的文件名字
        path: path.resolve(__dirname, 'dist') // 必須是絕對路徑     
    }
}

每次運行前，先刪除dist文件夾。運行 npx webpack 命令,dist文件夾下會生成bundle.js文件，此時文件的內容也與配置文件值以前有所區別，由於此時咱們的mode是開發環境。

webpackfile.js

咱們也可使用webpackfile.js文件進行webpack的配置,這個咱們能夠在node_modules\webpack-cli\bin的config-yargs.js文件中找到以下代碼

defaultDescription: "webpack.config.js or webpackfile.js",

因此咱們將上面的配置文件名改爲webpackfile.js 並將打包後的文件名修改爲bundlefile.js進行區分。

filename: 'bundlefile.js', //打包後的文件名字

再次運行，效果與上面是一致的。

webpack --config

假如不用上面默認的配置文件名，本身取一個例如my.config.js 能夠嗎？這個也是能夠的。
咱們將上例子的webpackkfile.js文件名修改成my.config.js。並將打包後的文件名修改爲bundlemy.js進行區分。

filename: 'bundlemy.js', //打包後的文件名字

此時在運行時，咱們須要運行以下命令

npx webpack --config my.config.js

再次運行，效果與上面是一致的。
可是每一次咱們打包都須要寫一大串,有什麼辦法能夠避免呢。

NPM 腳本(NPM Scripts)

考慮到用 CLI 這種方式來運行本地的 webpack 不是特別方便，咱們能夠設置一個快捷方式。在 package.json 添加一個 npm 腳本(npm script)：

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+   "build": "webpack --config my.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  }
}

如今，可使用 npm run build 命令，來替代咱們以前使用的 npx 命令。
上面的例子中咱們只是打包了js文件，咱們還沒有引用，下面咱們引用一下,咱們對目錄作以下修改

project

webpack-demo
    dist
        bundlemy.js
+       index.html
    package.json
    my.config.js   
-   index.html
    /src
        index.js

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>webpack-demo</title>
    </head>
    <body>
    </body>
    <script src="./bundlemy.js"></script>
</html>

如今咱們是手動引入文件，假如文件名時刻都在變化，咱們每次引入不是很麻煩嘛？咱們引入一個插件解決此問題

管理輸出

HtmlWebpackPlugin

該插件將爲你生成一個 HTML5 文件，其中包括使用 script 標籤的 body 中的全部 webpack 包。

安裝

npm install --save-dev html-webpack-plugin

基本用法

const path = require('path');
+    const HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        mode: 'development', // development 開發環境  、production 生成環境
        entry: './src/index.js', // 須要打包文件的入口
        output: {
+            filename: 'bundle.js', //打包後的文件名字
            path: path.resolve(__dirname, 'dist') // 必須是絕對路徑     
        },
+       plugins:[
+           new HtmlWebpackPlugin()
+       ]
    }

刪除dist文件，打包後，這將會產生一個包含如下內容的文件 dist/index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="bundle.js"></script></body>
</html>

會自動幫咱們引入生成的文件。插件中有不少配置項，具體的能夠看這篇文章,連接在這裏

教程源碼

https://github.com/qzyqzy/webpack4.git

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。