Webpack的安装与配置

时间 2019-11-24

标签 webpack 安装配置繁體版

原文原文链接

上一篇文章中出现的错误，其实能够基于 webpack 把这种有兼容性的代码转换成没有兼容性的代码，再引入转换以后的 js 文件就可，具体实现以下：html

1. 安装包

在终端中运行以下命令，安装 webpack 相关的包webpack

npm install webpack webpack-cli -D

2. 建立配置文件

在项目的根目录中，建立 webpack.config.js 的 webpack 配置文件,而且初始化以下配置：web

module.exports = { 
    mode: 'development' //mode用来指定构建模块
}

3. 新增脚本

在 package.json 配置文件中的 package.json scripts 节点下，新增 dev 脚本，(原有脚本保留):shell

'scripts': {
    'dev': 'webpack' // script 节点下的脚本，能够经过 npm run 执行
}

4. 项目打包

在终端中运行以下命令，启动 webpack 进行项目打包npm

npm run dev

打包完成以后，会自动建立一个 dist 文件夹，里面包含一个 main.jsn ,此时再回到 src -> index.html 中，从新引入打包以后的 js文件，代码以下图：json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 传统模式是以下引入，可是咱们要用模块化思惟 -->
    <!-- <script src="./index.js"></script> -->
    <script src="../dist/main.js"></script>
</head>
<body>
    <ul>
        <li>这是第 1 个li</li>
        <li>这是第 2 个li</li>
        <li>这是第 3 个li</li>
        <li>这是第 4 个li</li>
        <li>这是第 5 个li</li>
        <li>这是第 6 个li</li>
        <li>这是第 7 个li</li>
        <li>这是第 8 个li</li>
        <li>这是第 9 个li</li>
    </ul>
</body>
</html>

此时再运行 index.html 文件就不会报错，运行结果以下图：
模块化

这就是 webpack 最基本的安装与配置，可是在完整的项目中，可能须要你去修改默认的出入口，那要如何配置呢？请看下一篇文章 webpack的配置汇总ui