webpack 打包js文件

首先为啥要用webpack打包js文件，举个例子

index.html如下：

	
	


	
1
	
2
	
3
	
4

Main.js如下：

import $ from 'jquery'
$(function(){
	$('li:odd').css('backgroundColor','blue');
})

正常来说，我运行index.html是可以看到偶数行是会变蓝色的，但是运行之后结果如下：

原因是在Main.js中import 引用jquery是ES6中的语法，在浏览器无法识别，所以样式是无法出来的。

所以我们可以通过webpack对Main.js打包成一个新的js文件，新的js文件是可以被浏览器识别的。

 

 

 

1，局部安装webpack：

进入到项目路径下，在终端运行： npm install --save-dev webpack

当然也可以选择全局安装： npm i webpack -g

2，通过终端命令行来打包js文件，

文件目录如下：

 

下面开始用webpack打包Main.js文件

终端命令：

node_modules/.bin/webpack ./src/Main.js -o ./dist/bundle.js（由于我是局部安装webpack的，所以在webpack前面要加上路径）

运行结果是在dist文件夹下新增了一个bundle.js文件。

然后我们在index,html中引用打包之后的js文件：

	
	


	
1
	
2
	
3
	
4

运行结果如下：

如果你是全局安装webpack的话，在终端输入  webpack ./src/Main.js -o ./dist/bundle.js   即可。

 

接下来有个问题就是如果我们频繁的改动Main.js文件中的内容，那么bundle.js的内容也要跟着变，我们可以继续用node_modules/.bin/webpack ./src/Main.js -o ./dist/bundle.js（局部安装）来更新bundle.js的值，如果每次输入这个字符串的话有点繁琐，我们可以新建一个webpack.config.js的文件，在文件中配置如下信息：

module.exports={
	entry: __dirname+'/src/Main.js',   //Main.js的路径
	output:{
		path: __dirname+'/dist',   //bundle.js的路径
		filename:'bundle.js'
	}
}

然后在终端中输入node_modules/.bin/webpack（局部安装webpack，如果全局安装webpack的话，直接输入webpack就可以了）即可。

 

 

 

有问题还请博主们指出。