webpack 打包vue项目（一）

webpack 打包vue项目

webpack介绍

一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境。
webpack提供了友好的模块化支持，一级代码压缩混淆，处理js兼容问题、性能优化等强大的功能，从而让程序员把工作重心放到具体的功能实现上，提高了开发效率和项目的可维护性。

具体打包成的文件

基本使用（创建列表隔行变色项目）

1、新建项目空白目录，并运行npm init -Y命令，初始化。

2、新建src源代码目录。

3、新建src -> index.html首页

4、初始化首页基本结构

5、运行npm install jquery -s命令，安装JQuery。

6、通过模块化的形式，实现效果。

一、在项目中安装和配置webpack

1、运行npm install webpack webpack-cli -D命令安装。

2、在项目根目录中，创建名为webpack.config.js的webpack配置文件。

3、在webpack的配置文件中，初始化如下基本配置：

module.exports = {
	mode:  'development' // 开发模式（转化出来的代码不会压缩混淆）
	// mode用来指定构建模式
	// production 发布模式（转化出来的代码压缩混淆，转化时间长）
}

4、在package.json配置文件中的script节点下，新增dev脚本如下：

// An highlighted block
"script": {
	"dev": "webpack"  // script节点下的脚本，可以通过npm run 执行
}

5、在终端中运行npm run dev命令，启动webpack进行项目打包。