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

每日一句

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