目录

webpack

webpack

webpack使用教程

安装全局依赖 webpack

$ npm install -g webpack

安装webpack的时候 遇到的情况; 直接按照提示安装 提示Module webpack-cli 不存在 解决 npm install webpack-cli -g

用 npm init 初始化项目

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
# 随便进一个目录

$ cd ~/codes

# 创建一个存放 webpack 项目的目录,名为 hello-webpack

$ mkdir hello-webpack

$ npm init

多出了一个名为 package.json

webpack.dev.config.js → 开发环境中用到的配置文件

webpack.pub.config.js → 生产环境中用到的配置文件

通过运行下面的命令进行配置文件的选择

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
webpack --config webpack.dev.config.js

配置npm的package.json文件

"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"dev":"webpack --config webpack.dev.config.js",
	"pub":"webpack --config webpack.pub.config.js"
},

在根目录下执行命令

npm run dev

这样之后就不要敲那么复杂的命令了

加载CSS

npm install –save-dev css-loader style-loader

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

修改配置文件,在loaders中加上

{
	test: /\.css$/,
	loader: 'style!css' // 如果有多个加载器,中间用感叹号隔开,多个加载器从右往左执行
}

src/app.js 你可以为整个项目加载所有的 CSS

import  './project-styles.css';

图片处理

下载依赖

1
2
3
4
5
6
7
8
9

npm  install  --save-dev url-loader file-loader

修改配置文件

{
test: /\.(png|jpeg|gif|jpg)$/,
loader: 'url?limit=25000'
}

package.json文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var path = require('path');
module.exports = {
	entry: path.resolve(__dirname, 'src/js/app.js'),
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	module: {
		loaders: [
			{
				test: /\.jsx?$/, 
				loader: 'babel',
				query: {
					presets: ['es2015', 'react']
				}
			},
			{
				test: /\.css$/, 
				loader: 'style!css' 
			},
			{
				test: /\.scss$/,
				loader: 'style!css!sass'
			},
			{
				test: /\.(png|jpeg|gif|jpg)$/,
				loader: 'file-loader?name=images/[name].[ext]'
			},
		]
	},
}

常用插件介绍

压缩插件

1
2
3
4
5
6
7
8
9
这个插件是webpack自带的

// 用webpack压缩代码,可以忽略代码中的警告
new webpack.optimize.UglifyJsPlugin({
	compress: {
		warnings: false
	}
}),

  • CSS插件

npm install –save-dev extract-text-webpack-plugin

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
	使用
// 可以新建多个抽离样式的文件,这样就可以有多个css文件了。
new ExtractTextPlugin("app.css"),

plugins: [
	// 可以新建多个抽离样式的文件,这样就可以有多个css文件了。
	new ExtractTextPlugin("app.css"),
]

修改loaders中的配置
{
	test: /\.css$/,
	loader: ExtractTextPlugin.extract('style-loader' , 'css-loader')
},
  • html页面插件

npm install –save-dev html-webpack-plugin

使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// 自动生成index.html页面插件
var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
	new HtmlWebpackPlugin({
		template: './src/template.html',
		htmlWebpackPlugin: {
			"files": {
				"css": ["app.css"],
				"js": ["vendors.js","bundle.js"]
			}
		},
		minify: {
			removeComments: true,
			collapseWhitespace: true,
			removeAttributeQuotes: true
		}
	}),
]
  • 删除插件

npm install –save-dev clean-webpack-plugin

1
2
3
4
5
6
7
// 删除文件夹
var CleanPlugin = require('clean-webpack-plugin');

plugins: [
	// 构建之前先删除dist目录下面的文件夹
	new CleanPlugin(['dist']),
]
  • 去掉react中的警告
1
2
3
4
5
6
7
8
plugins: [
	new webpack.DefinePlugin({
		//去掉react中的警告,react会自己判断
		'process.env': {
			NODE_ENV: '"production"'
		}
	}),
]

常见问题

输入npm install webpack –save-dev

局部安装webpack提示无法依赖 npm ERR! Windows_NT 6.1.7601 说明你执行命令的目录里有一个package.json文件,并且该文件里的name字段就叫webpack。换个名字就好了

webpack 插件

学习插件的第一步,是进入其主页,先把它的 readme 文档看看,至少知道它是干什么的,能解决什么问题,最后知道如何用就行了