使用webpack打包js文件

166 阅读1分钟
在cmd命令行进入一个文件夹,比如/Desktop/webpack_all
然后执行npm init -y命令
这样就得到了一个pakage.json文件。

然后在pakage.json里面添加一个字段并且添加一些插件,
先添加这三个,前面两个是用来打包js的,后面的webpack-dev-server则是用来做服务的,以后用到,最好指定版本,不然有兼容性问题,坑。

然后创建一个目录开始写一个js文件,随便在js文件里面写点内容。

然后在文件夹下新建一个配置文件,一般都叫webpack.config.js,
这样使用webpack打包的时候就会读取这个配置文件的参数。
然后开始写webpack.config.js,首先引入path模块,这个模块是node内置的。
接着用module.exports导出一个对象,里面写一些参数。

entry标识要打包的文件是哪个,output则是输出。

output则需要设置path路径以及filename文件名。其中path是要绝对路径,所以就需要用node的path模块来获取到绝对路径,__dirname是内置的变量,获取的就是绝对路径。后面则是自己起的一个名字,有这个名字就会自动创建对应的文件夹。

filename则是打包之后生成的文件的文件名。

然后在package.json里面的scripts写上命令,build: webpack

然后在pakage.json目录下执行npm run build即可
这样就得到了打包的文件了