1)安装webpack
1.全局安装webpack
命令: npm install webpack -g
2. 初始化 package.js文件
命令: npm init -y ====> 运行之后,在src下会自动新建一个package.json的文件;
3. 安装webpack到package.json文件中。
命令 : npm install webpack --save-dev ====>运行之后,该文件夹下会自动生成一个node_modules的文件夹,以及package-lock.json文件;
4. webpack 4.0以及之后的版本还需要安装 webpack-cli(目前3相对比较稳定,3不需要安装这些)
命令: npm i -D webpack-cli
5. 配置环境 在webpack.config.js文件的module.export中配置生产环境和开发环境的相关属性(4.0以上的版本)
mode:" development " ( development:开发环境 production:生产环境)**
2)在src目录下新建一个webpack的配置文件叫做webpack.config.js
说明:
这个文件名可以修改,但是跟配置webpack运行的属性值直接相关,否则会报错
项目结构:
3)配置 webpack.config.js 文件
代码如下
const path = require('path');
module.exports = {
entry:"./src/main.js", //即项目入口文件的路径,
output:{ //a.生成的新的js文件会存在在哪个位置
//这里需要一个绝对路径,因此引用了path这个模块
// __dirname代表项目的总目录(src的上级目录),dist是文件导出后所要存在的文件夹名
path: path.resolve(__dirname,'dist') ,
filename:"main.js" //b.生成的新的js文件叫什么名字
}
};
/*module.exports是node.js的语法 ,这里就是webpack的配置 :
比如webpack会以书面方式来打包,打包的过程中它会做一些什么事情
在这个导出对象中,至少需要设置两个属性:
entry: 这个就是我们整个项目的入口,找到入口文件之后他会打包出一份新的文件,
所以还需要设置一个关于出口文件(output)的属性*/
4)配置webpack运行命令
在package.js文件中找到 scripts属性,添加 “dev” : "webpack"
这块默认运行webpack.config.js这个文件,配置好之后,就可以直接用命令行运行了
命令: npm run dev
运行之后,在我们设置的dist(运行webpack之后,新生成文件所存放的文件夹)文件下,就可以看到我们打包好新生成的js文件了