欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack安装与基本配置

程序员文章站 2022-05-17 19:39:24
webpack安装与基本配置 1.假设你已经有了一个需要打包的项目,那么我们开始以下操作 2.在src目录下新建一个webpack的配置文件叫做webpack.config.js 说明: 这个文件名...

webpack安装与基本配置

1.假设你已经有了一个需要打包的项目,那么我们开始以下操作

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: path.resolve(__dirname,'dist') , //这里需要一个绝对路径,因此引用了path这个模块 __dirname代表项目的总目录(src的上级目录),dist是文件导出后所要存在的文件夹名

filename:"main.js" //b.生成的新的js文件叫什么名字

}

};

//module.exports是node.js的语法 ,这里就是webpack的配置 比如webpack会以书面方式来打包,打包的过程中它会做一些什么事情

//在这个导出对象中,至少需要设置两个属性:

// entry: 这个就是我们整个项目的入口,找到入口文件之后他会打包出一份新的文件,所以还需要设置一个关于出口文件(output)的属性

3.安装wepack

1. 初始化 package.js文件 命令:npm init -y ====>运行之后,再src下会自动新建一个package.jison的文件;

2. 安装项目开发所需要的相关依赖 命令 : npm i -d webpack ====>运行之后,跟src同级会自动生成一个node_modulesd的文件,在src下会自动生成一个package-lock.json;

3. webpack 4.0以及之后的版本还需要安装 webpack-cli(目前3相对比较稳定,3不需要安装这些) 命令: npm i -d webpack-cli

4. 在webpack.config.js文件的module.export中配置生成环境和开发环境的相关属性(4.0以上的版本)

5. mode:" development " ( development:开发环境 production:生产环境)

4. 配置webpack运行命令

在package.js文件中找到script属性,添加 “dev”: “webpack”

这块默认运行webpack.config.js这个文件,配置好之后,就可以直接用命令行运行了 命令:npm run dev

运行之后,在我们设置的dist(运行webpack之后,新生成文件所存放的文件夹)文件下,就可以看到我们打包好新生成的js文件了