webpack的安装很简单,但是过程中有一些麻烦如果不知道怎么解决的话就让人很抓狂,先简单说以下安装过程。
安装过程
1.mkdir webpack-demo
新建一个项目文件
2.cd webpack-demo
进入文件
3.npm init
初始化仓库,输入一些项目信息,直接回车也可以
4.npm install webpack --save-dev
安装webpack,等待下载完成,其中--save-dev表示保存模块到本地项目中,下面图片详细解释了相关参数的意思。
5.webpack name.js name.bundle.js
name.js表示自己写好的js文件,需要提前保存好。name.bundle.js表示打包好的文件,自动生成的。
6.如果提示安装模块webpack-cli记得安装,这个模块是提供webpack命令行支持的。
这就结束了?并没有!有好几个坑必须要说下,在解决第一个错误时可能会出现第二个错误,按步骤解决就好啦。
常见的错误
1.找不到webpack命令。
-解决方法
因为webpack命令没有加入到系统环境变量中,导致无法执行。
使用npx命令会帮你执行依赖包里的二进制文件。
npx webpack name.js name.bundle.js
。
2.出现类似于Module not found: Error: Can't resolve 'name.bundle.js/name.js/./src'
错误提示。
乍一看有些摸不清头脑,为啥不能识别js文件?
还有./src目录又是什么鬼?
仔细看官网文件就可以发现,官方文档里webpack的入口文件是在./src/index.js中。
也就是说我们犯了两个错误,没有把入口文件放在src目录下,第二个错误,入口文件名不是index.js。
-解决方法一
采用系统默认配置,把入口文件放在./src/index.js中,自动生成的bundle文件在./dist/main.js中。打包js文件时只用输入命令npx webpack
就可以了。
-解决方法二
修改配置文件,自定义我们的入口和出口文件,在项目地址下创建webpack.config.js文件,内容为:
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
///其中,entry属性表示我们要打包的js文件,filename属性表示输出的文件名,path属性表示输出文件的位置。
打包js文件时只用输入命令npx webpack
就可以了。
入口文件和出口文件我们都已经定义好了。
踩坑完毕,收。。。。工