Webpack的安装与配置

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

1. 安装包

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

npm install webpack webpack-cli -D

2. 创建配置文件

在项目的根目录中,创建 webpack.config.jswebpack 配置文件,并且初始化如下配置:

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

3. 新增脚本

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

'scripts': {
    'dev': 'webpack' // script 节点下的脚本,可以通过 npm run 执行
}

4. 项目打包

在终端中运行如下命令,启动 webpack 进行项目打包

npm run dev 

打包完成之后,会自动创建一个 dist 文件夹,里面包含 一个 main.jsn ,此时再回到 src -> index.html 中,重新引入 打包之后的 js文件,代码如下图:

<!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 文件就不会报错,运行结果如下图:
index.html

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

posted @ 2019-11-22 16:40  木子蔻  阅读(326)  评论(0编辑  收藏  举报