webpack安装及开发环境配置

最新推荐文章于 2023-06-02 12:40:50 发布

三游

最新推荐文章于 2023-06-02 12:40:50 发布

阅读量182

点赞数

分类专栏：前端文章标签： webpack

本文链接：https://blog.csdn.net/zm151110202/article/details/99961807

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

最近学webpack在网上找了教程跟着学，因为webpack版本的问题，导致开发环境配置过程非常不顺利，百度了很多方法都无效。直到看到了这篇博客，配置成功后自己也整理一下配置过程。我的webpack版本为4.39.2。
参考博客：https://blog.csdn.net/u012443286/article/details/79504289

1.全局安装webpack

npm install webpack -g

老版本到此已经安装完成，但新版本中将CLI（命令行工具）转移到了一个单独的包中，所以我们还需要安装webpack-cli。（注意：webpack-cli也要对应进行全局安装）

npm install webpack-cli -g

webpack安装完成后可以在命令行进行查看版本，至此webpack安装成功

webpack -v

2.创建项目

创建文件夹webpack-test存放项目，在文件夹中打开命令行进行项目初始化

npm init

回车会会进行设置各自选项，根据情况进行填写，或者直接回车进行默认值设置。完成后文件夹中会新增一个package.json文件，它用于保存项目的相关信息。

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

在webpack-test文件夹下新建一个src文件夹，scr文件夹下创建一个index.js文件

document.write("hello world!");

3.打包

如果此时尝试打包，会出现错误，警告“mode”选项为设置，将“mode”选项设置为“development”或“production”以启用此环境的默认设置。

webpack index.js bundle.js

所以应该在package.json文件中修改“scripts”项

"scripts": {
  	"dev": "webpack --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

修改完之后再次使用命令进行打包，依旧发生错误，查阅资料说这是旧版本的打包方式，新版本使用以下方式进行打包

webpack index.js -o bundle.js

而另一种说法为新版本使用 webpack --mode development 或 webpack --mode production ，这样会进行默认打包，入口文件是 ./src/index.js，输出路径是 ./dist/main.js ，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。

webpack --mode development
或
webpack --mode production

参考那个博主，我使用了npm run dev 进行打包。npm run dev 相当于执行 webpack --mode development ，npm run build 相当于执行 webpack --mode production。

npm run dev
或
npm run build

可以看到在根目录下创建了一个dist文件夹，dist文件夹中生成了main.js文件（打包好的代码都在里面）。
如果在dist文件下有index.html

<!doctype html>
<html>
  <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="main.js" charset="utf-8"></script>
    </body>
</html>

打开index.html就能在浏览器上看到 “hello world!” 啦！

三游

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack安装及开发环境配置

最近学webpack在网上找了教程跟着学，因为webpack版本的问题，导致开发环境配置过程非常不顺利，百度了很多方法都无效。直到看到了这篇博客，配置成功后自己也整理一下配置过程。我的webpack版本为4.39.2。参考博客：https://blog.csdn.net/u012443286/article/details/795042891.全局安装webpacknpm install w...
复制链接

扫一扫

专栏目录