学习笔记 JavaScript ES6 Webpack配置

白鸽同学

已于 2022-05-06 23:38:56 修改

阅读量1.6k

点赞数

分类专栏：学习笔记 JavaScript ES6 文章标签： javascript ecmascript 前端

于 2022-04-22 23:49:35 首次发布

本文链接：https://blog.csdn.net/sure0911/article/details/124077080

版权

学习笔记 JavaScript ES6 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

从零开始配置webpack。

step1：建立文件夹

在桌面上新建一个文件夹es6-webpack然后拖入vs code中。

VS Code中按control+~，打开终端，终端显示的路径为：

wangshuomatoMacBook-Pro:es6-webpack wangshuo$

step2：初始化package.json

在项目中初始化一个package.json文件，后面会将项目依赖的包都配置在这个文件里。

初始化的方法是在终端里输入命令：（需要有node和npm环境）

npm init

一路回车后，生成package.json文件

如果在npm init 后面加 -y，就可以跳过这些回车的环节直接生成package.json。

npm init -y

step3：安装webpack

这里介绍两种方式，一种是项目安装，把webpack安装到当前项目里面；第二种是全局安装，在电脑的整个环境里安装webpack，但是并不建议使用全局安装，因为webpack版本可能影响其它项目，或者升级webpack版本时影响其它项目。

全局安装命令（不推荐）：

npm i webpack -g // i是install的简写

项目安装：通过空格可以同时安装多个包。

npm i webpack webpack-cli webpack-dev-server --save-dev

--save-dev

webpack中分为开发环境和生产环境，生产环境是指上线打包的环境。webpack只有在开发环境中才会用到，上线后就不需要用webpack了。

所以，对只在开发环境下使用，上线后不需要使用的包，在安装时就需要使用 --save-dev。

通过--save-dev安装的包会生成devDependencies，

webpack中文文档地址：概念 | webpack 中文网https://www.webpackjs.com/concepts/文件package-lock.json作用是锁定包的版本，node_modules是包安装的位置。

node_modules是不需要上传到git上面的。因为使用npm install就可以根据package.json的依赖自动生成node_modules文件夹。

step4：新建webpack.config.js并编辑

module.exports = {
    mode : 'development', // 开发模式
    entry : './src/index.js' // 指定入口文件，./表示当前路径
}

step5：创建入口文件

创建存放源文件的文件夹src并新建index.js入口文件并编辑。

const sum = (x ,y) => x + y

此时，目录结构如下：

此时使用webpack使命打包项目是不可以的，因为webpack并不是安装在全局下，而是安装在项目下，如果想在项目内部安装的模块当中找webpack的模块，就要用到npx命令。

这时，会在目录中生成一个dist的文件夹

如果把开发模式改为生产环境，配置output后，代码就会被执行混淆。

step6：打包HTML文件

这里需要使用plugin，开发环境需要在终端输入命令，生产环境不需要这个命令，--save-dev可以简写为-D。

npm i html-webpack-plugin --save-dev

现在来看一下包“html-webpack-plugin”是如何安装并使用的，访问网站：npmjs.com，进入后搜索html-webpack-plugin，如图：

看到了示例是如何使用的，再来写代码，完善webpack.config.js

把下面的代码加进去，引入一个包：

const HtmlWebpackPlugin = require('html-webpack-plugin')

此时，webpack.config.js代码如下：

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode : 'development', 
    entry : './src/index.js', // 指定入口文件 
    output : {
        filename : 'index.js'
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

再运行npx webpack，会在dist文件夹下生成一个index.html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Webpack App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script defer src="index.js"></script>
  </head>
  <body></body>
</html>

通过上面代码，我们发现自动将index.js引入了，也就是说，当项目有很多js需要引入时，可以不再像以前一样手动写<script />标签引入了，webpack会自动处理。

能够在html文件中引入外部的资源文件，生成一个html的入口。

step7：配置HTML模板

如果想在生成html文件时指定title等内容，就可以通过设置一个模板文件来实现。

在src下新建一个index.html文件，（VSCode下，输入!+tab就可以自动生成一个空白的html结构），修改指定的内容后，比如修改title为hellow es6，然后在webpack.conf.js文件中，修改plugin：

plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html' // 指定模板
        })
    ]

再运行npx webpack，发现新生成的index.html中title已经变成了hello es6。

step8：配置webpack不打包哪些文件，原封不动的copy过去

有些文件不需要被webpack打包，比如在src同级目录新建一个static文件夹，这时需要再安装一个包，copy-webpack-plugin，安装命令如下：

npm i copy-webpack-plugin -D

然后再用同样的方式导入及配置plugin：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
    mode : 'development', 
    entry : './src/index.js', // 指定入口文件 
    output : {
        filename : 'index.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CopyPlugin({
            patterns: [
              { from: "static", to: "static" }
            ],
            options: {
              concurrency: 100,
            },
        })
    ]
}

npx webpack后如图：