git 创建webpack项目_webpack项目的搭建及环境构建

现如今，webpack已经快速进入前端开发人员的眼线(从1.0到4.X的版本的更新迭代)，给前端开发也带来了很大的突破，webpack可以分析项目结构，模块化打包机，处理模块化依赖，转换成浏览器可运行代码。

废话不多，现在开始讲述下webpack环境的搭建吧。

1.首先我们把webpack环境搭好：

在工程文件创建一个文件夹，通过git打开控制台，输入npm init.回车。

根据提示，对创建的工程文件进行命名，描述等(这里也可以一直敲回车，后续在文件夹中更改)，创建成功之后会在刚刚创建的文件夹中多出一个package.json文件(注意文件的name一定不能用默认的webpack)，

然后在通过npm install 安装工程依赖，初始化项目的话用npm install webpack webpack-cli -D命令，这样webpack的项目已经基本搭建完成了。

2.接下来我们看看webpack的配置问题：

webpack需要在项目根目录下创建一个webpack.config.js文件，通过该配置文件来导出webpack的配置，webpack的配置多样化，可以自己定制，现在来看看最基本的配置。

1 module.exports ={2 　　entry : './src/index.js',

3 output: {4 　　　　path : path.join(__dirname,'./dist'),5 　　　　filename : 'main.js'

6 }7 }

entry : 代表入口，webpack会找到该文件进行解析

output ：代表输入文件配置

path : 把打包后的文件存放的位置

filename : 输出文件的名字

有时候我们所建的项目并不是基于spa技术，而是会基于nuxt.js的多页面，需要生成多个html，js文件，那么我们就可能需要配置多个入口。代码如下：

1 module.exports ={2 entry : {3 pageA : './src/pageA.js',4 pageB : './src/pageB.js'

5 },6 output : {7 path : path.join(__dirname,'./dist'),

8 filename : '[name].[hash:8].js'

9 }10 }

谢谢你阅读我的文章~

总结

以上是生活随笔为你收集整理的git 创建webpack项目_webpack项目的搭建及环境构建的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。