webpack的初级使用

**注意：webpack4.+版本不向下与3.+版本兼容，此处使用3.5.5版本npm install webpack@3.5..5 -g

简单步骤：

1. 目录进入项目文件夹下，名称必须为英文（避免不必要的错误）
2. 运行命令npm init,然后一路回车，此时会在项目文件下生成一个package.josn文件
3. 新建一个webpack.config.js文件如下代码：（配置文件，定义一些打包的规则）

module.exports = {
	entry:'entry.js';//入口文件 可有多个
	output:{		//输出文件
		filename:'index.js',//输出文件名    此处为解决cdn更新缓慢问题，一般加上哈希值  index-[hash:8].js
		//此处还可以为 index-[chunkhash:8].js   只改变有变化的模块，比如多页面时，有些变了有些没变，就是谁有变化生成的谁的对应输出模块才有变化
		path:__dirname+'/out'; //路径，__dirname表示绝对路径
	}
}

4. 命令行运行webpack,就打包完成了。

webpack -w //或者输入此命令 监听，每次文件有变化，就自动打包

loader加载器的使用

1. 作用：解析浏览器不识别的模块，比如less/ES6
2. 注：在下载loader时加上 --save-dev,该loader就会在package.json文件内有记录保存下载的loader，项目迁移时是需要webpack install就会自动下载已记录的loader
3. 安装babel-loader,（解析ES6）命令行输入一下代码npm install babel-loader,此时，项目文件夹下会多一个node_modules文件夹。
4. 依次安装以下加载器

npm install babel@6.23.0
npm install babel-core@6.26.0
npm install css-loader@0.28.10
npm install style-loader@0.20.2
npm install url-loader@0.6.2
npm install file-loader@1.1.9
npm install less-loader@4.0.6
npm install less@3.0.1

安装以下插件（插件的使用需要先引入）

npm install uglifyjs-webpack-plugin@1.2.2 //要使用此插件，需要在该项目下在安装一下webpack3.5.5    npm install webpack@3.5.5
npm install extract-text-webpack-plugin@3.0.2
npm install webpack-dev-server@2 -g  //webpack服务器，使用时，打包指令为 webpack-dev-server  

4. 在webpack.config.js添加如下代码：

module.exports = {
	...
	module:{
		rules:[
			{test:/.js$/,use:['babel-loader']}, // 表示 以.js结尾的文件使用babel-loader解析
			{test:/.css$/,use:['style-loader','css-loader']},//css-loader解析css,style-loader将其打包进js文件
			{test:/.jpg|png|gif|svg/,use:['url-loader']}
		]
	}
}

5. 快捷方式：
   npm run tanjw

模块化写法：

//封装成一个模块(一般一个js文件为一个模块：tool.js)
module.exports = {
	hello:function(str){
		console.log(str);
	}
}
//引入并使用一个模块
var tool = require('./tool.js');

页面分离（一般是将公共模块（如一个模块引入多次）单独合并成一个文件，分离加载，使用CommonsChunkPlugin）

1. 见下

css独立打包（使用exextract-text-webpack-plugin）

1. 见下

挂载全局（使用ProvidePlugin,如jquery）

1. 先下载jquerynpm install jquery
2. 见下

完整package.json文件

{
  "name": "web-speech",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tanjw": "webpack-dev-server --devtool eval-source-map --progress"
  },
  "author": "tanjw",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.3",
    "css-loader": "^0.28.10",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.9",
    "jquery": "^3.3.1",
    "less": "^3.0.1",
    "less-loader": "^4.0.6",
    "style-loader": "^0.20.2",
    "uglifyjs-webpack-plugin": "^1.2.2",
    "url-loader": "^0.6.2",
    "webpack": "^3.5.5"
  }
}

完整webpack.config.js文件及注释

var UglifyJSPlugin = require('uglifyjs-webpack-plugin');//引入压缩代码的插件
var webpack = require('webpack');//页面分离插件已经在webpack了
var ExtractTextPlugin = require("extract-text-webpack-plugin");//css独立打包插件
var providePlugin = new webpack.ProvidePlugin({$:'jquery',JQuery:'jquery','window.JQuery':'jquery'});
module.exports = {
	entry:{   //入口文件 可有多个
		index:'./src/js/entry.js',
		//index2:''
	
	},
	output:{		//输出文件
		filename:'[name].js',//输出文件名  对应文件名为index.js/index2.js  此处为解决cdn更新缓慢问题，一般加上哈希值  index-[hash:8].js
		//此处还可以为 index-[chunkhash:8].js   只改变有变化的模块，比如多页面时，有些变了有些没变，就是谁有变化生成的谁的对应输出模块才有变化
		path:__dirname+'/out', //路径，__dirname表示绝对路径
		publicPath:'./out'//此处一般将静态资源文件打包到服务器，填写服务器的地址
		//使用css独立打包时，会出现静态资源路径不统一的问题，需要打包到服务器解决。修改为publicPath:'http://localhost:8080/out'(webpack提供了一个服务器，需下载)
	},
	module:{
		rules:[
			{test:/.js$/,use:['babel-loader']},   // 表示 以.js结尾的文件使用babel-loader解析
			{test:/.css$/,use:['style-loader','css-loader']},//css-loader解析css,style-loader将其打包进js文件
			// {                     //独立打包css文件时解禁此段，注释上一行
			// 	test:/.css$/,
			// 	use:ExtractTextPlugin.extract({
			// 		fallback:"style-loader",
			// 		use:"css-loader"
			// 	})
			// },
			{test:/.jpg|png|gif|svg$/,use:['url-loader?limit=8192&name=./[name].[ext]']},//将图片打包进js文件
			//图片大于8kb时，独立打包出来，路径在out下，名字是原来的名字，文件格式也是原来的
			//此时，直接打包，会发现图片并没有直接显示出来并有一个错误。需要在output添加一个静态资源公共路径publicPath
			{test:/.less$/,use:['style-loader','css-loder','less-loader']}   //打包less到js
		]
	},
	plugins:[
		// new UglifyJSPlugin(),//使用压缩代码的插件,如果需要压缩代码，解开注释
		new webpack.optimize.CommonsChunkPlugin({   //将引用超过三次的模块独立打包成一个js文件,页面分离
			name:"commons",
			filename:"commons.js",
			minChunks:3
		}),
		// new ExtractTextPlugin("[name].css"),//此时独立打包的话，上面将css打包进js文件就要注释掉
		providePlugin   // 挂载全局jQuery
	]
}