粤嵌教育
gzyueqian
13352868059

webpack安装配置和打包问题

更新时间: 2018-08-27 10:16:10来源: 嵌入式培训浏览量:6254

在安装配置webpack的时候,我遇到的问题如下:

已经全局、局部安装了webpack,在命令行中输入webpack -v也会显示版本号,并且也按照网上的一些教程配置了环境变量,但是在打包文件的时候还是会报Cannot find module 'webpack'这个错误,下面是我解决这个问题的做法

一、前提条件

1、确保自己安装的是Node.js版本,如果已经安装过的话可以打开nodejs的官网,看这个位置

嵌入式培训

嵌入式培训

然后点击,重新下载

2、win+R,搜索cmd,打开之后输入:node -v,查看当前自己电脑上的版本,如果不是版,再输入where node,找到自己当初安装nodejs时的路径,记住这个路径

3、安装刚下载的版nodejs,路径就填第2步查到的路径,进行覆盖安装

4、安装完成之后输入node -v查看版本,如果显示是版本,则覆盖成功

二、本地安装webpack(不建议全局安装)

1、在D盘直接建立一个空文件夹用来放测试项目(建在其它盘也可以,但是不建议在C盘)

如:

嵌入式培训

嵌入式培训

然后再在这个文件夹里面建一个

2、打开cmd,进入路径D:webpackwebpack-demo,然后输入:

npm init -y

npm install webpack webpack-cli --save-dev

3、在webpack-demo里创建以下内容:

嵌入式培训

嵌入式培训

嵌入式培训

嵌入式培训

4、修改package.json文件

嵌入式培训

嵌入式培训

5、在本地(webpack-demo文件夹内)安装library

npm install --save lodash

6、在脚本中import lodash

嵌入式培训

嵌入式培训

7、修改index.html文件

嵌入式培训

嵌入式培训

8、在webpack-demo文件路径执行:

npx webpack

嵌入式培训

嵌入式培训

将会出现一大堆东西:

嵌入式培训

嵌入式培训

9、在浏览器中打开index.html,如果安装配置成功访问正常,就能看到文本:Hello webpack

还有一种原因就是之前安装的webpack版本过高,在这里建议安装3.0.0版本的,如果之前有在项目文件内或全局安装过 webpack 的要先 uninstall 卸载,再打开新的cmd,重新打包

粤嵌科技13年专注IT人才培训学习的专业机构,主要培训课程为,嵌入式培训Java培训、Unity游戏开发、Python人工智能、HTML5前端开发、全栈UI设计、网络营销、CCIE网络等专业课程

免费预约试听课

推荐阅读