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项目的搭建及环境构建相关推荐

git 创建webpack项目_近期总结：手动搭建react项目，将项目从自己的库引入到新的项目中使用...
背景:最近公司有这样一个需求,需要开发一个react工具类,这个工具类可以用在其他项目里使用,并且这个工具类比较大,需要多人协作开发. 这个项目主要由同事负责,于是同事就将这个工具类当成一个单独的 ...
git 创建webpack项目_从0到1开发一个小程序cli脚手架（一）创建页面/组件模版篇...
github地址: https://github.com/jinxuanzheng01/xdk-cli cli工具是什么? 在正文之前先大致描述下什么是cli工具, cli工具英文名command-l ...
git 创建webpack项目_从 0 开始构建 webpack 项目【Webpack Book 翻译】
在开始之前,请确保你使用的是 Node 的最新版本.至少是最新的 LTS(长期支持)版本,本书的配置基于 LTS 版本所写,你的终端需要有 node 和 npm 命令,Yarn 也是一个不错的选择,也 ...
Javaweb项目入门到实战-搭建javaweb环境并运行（下）
咱们继续上一篇中剩下的内容idea运行javaweb和上次尚未说完的tomcat下载与运行,let's go !!! 熟悉的配方搭配精美的视频: 动力节点最新JavaWeb视频教程,javaweb零基 ...
python创建工程sublimw,python使用sublime搭建开发环境的简单示例
这篇文章主要为大家详细介绍了python使用sublime搭建开发环境的简单示例,具有一定的参考价值,可以用来参考一下. 对python这个高级语言感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来 ...
git 创建webpack项目_Webpack入门：从安装到配置
文档 webpack 用于编译 JavaScript 模块. 一旦完成安装,你就可以通过 webpack 的 CLI 或 API 与其配合交互. 这里以入门者的角度(中文)介绍 webpack 的常用 ...
git 创建webpack项目_一次create-react-app创建项目升级webpack的流水账
不再赘述为什么要升级webpack4,有兴趣的小伙伴可以看一下知乎:如何评价webpack4 下面撸起袖子开干: 克隆项目,新建分支 git checkout -b feature_webpack_ ...
git 创建webpack项目_使用webpack手动创建一个完整项目的全过程
1.创建文件夹"webpack-study" 2.使用webstrom打开文件夹所在位置.在根目录上创建一个文件,文件命名为"src",在src文件下新建css ...
零配置初始化流程就一直过不去_uni-app从零开发影视小程序1——搭建开发环境构建项目
前两天抓包了几个影视小程序的接口了,现在我准备用抓取的接口开发一个自己的影视小程序或app,并给大家分享一下如何从零开发一个小程序或app;在这里我将使用uniapp进行开发,uniapp是一个前端开 ...

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

git 创建webpack项目_webpack项目的搭建及环境构建相关推荐

最新文章

热门文章