VUE如何使用webpack进行项目打包

一 安装NODEJS，NPM

 

二建一个目录名子随意 在目录里打开终端运行npm init -y 生成package.json配制文件

三在目录里建一个src目录，建一个index.html  index.js文件（默认的打包入口就是src/index.js）

安装一个JQUERY包npm install jquery -S  

四建立 webpack.config.js 打包配制文件（这里可以通过entry.output设置打包入口入输出）

module.exports={
	//如果上的的时候请把模式改成productiong
	mode:"development"
}

package.json中添加以下配制

"scripts": {
	//nmp run dev打包
    "dev":"webpack"
  },

五安装webpack包 

npm install [email protected] [email protected] -D  (注册-D 和-S的区别)

六编写页面INDEXHTML 代码 

	
		
		
		
	
	
		

			
这是一个LI列表
			
这是一个LI列表
			
这是一个LI列表
			
这是一个LI列表
			
这是一个LI列表
			
这是一个LI列表
			
这是一个LI列表
			
这是一个LI列表
			
这是一个LI列表
		
	

index.js代码 

import $ from 'jquery'
$(function(){
	$("li:odd").css("background","red")
	$("li:even").css("background","pink")
	console.log("122");
})

终端运行 npm run dev 默认会把js代码打包生成dist/main.js

七 每次修改代码要运行一次打包才能预览太麻烦，我们可以通过安装和配置第三方插件，拓展webpack的能力，从而让webpack用起来更方便。

最常用的webpack插件是webpack-dev-server,类似于node.js阶段使用到的nodemon工具，每当修改源代码，webpack会自动 进行项目的打包和构建。

npm install [email protected] -D

安装完成修改package.json配制

"scripts": {
	//nmp run dev打包
    "dev":"webpack server"
  },

运行 npm run dev

浏览器里未运行localhost:8080文件 

默认生成的main.js是存在要目录下内存里的，不会更新dist/main.js所以我们要想时时查看效果就更新下html中的JS引用/main.js

或者html-webpack-plugin  HTML插件类似于一个模板引擎，可通过此插件自定制index.html的内容

运行：npm install html-webpack-plugin -D

安装好后修改webpack.config.js配制

 具体的作用就是src的index.html复制一份到根目录下面,这个文件也是在内存中目录下看不到，但是可以访问的。

配制运行 run dev后自动打开浏览器

最后，发布项目 

npm run build