webpack简单配置

发表于 | 分类于
字数统计: 558

创建一个webpack.config.js文件，基于node，所以要遵循CommonJS规范

打包出真实文件，即上线：webpack

开发的时候：webpack-dev-server

#基本配置

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
let path = require('path') ;

 /* node中path 模块提供了一些工具函数，用于处理文件与目录的路径。
path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。 
webpack通过require来判断哪些模板在编译打包时需要引用*/

let HtmlWebpackPlugin = require('html-webpack-plugin'); 
let webpack = require('webpack');
let ExtractTextPlugin = require('extract-text-webpack-plugin')
let CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
	entry:{
		js1:'path1',
		js2:'path2',
	},  // 入口
	output:{
		filename:'[name].js',
		path:path.resolve('./build'), // 必须是绝对路径
	},

	devServer:{
		contentBase:'',
		port:3000,
		compress:true,  // 服务器压缩
		open:true,  // 自动打开浏览器
		hot:true, // 热更新
	}，  // 开发服务器
	
    module：{
		rules:{
			test:/\.css$/,
			use:ExtractTextWebpackPlugin.extract({
				fallback:'style-loader',
		/* 把style-loader传给了fallback，这个配置的基本含义就是，
		extract默认行为先使用css-loader编译css，如果一切顺利的话，
		结束之后把css导出到规定的文件去。*/
				use:{
					loader:'css-loader'
				}
			})
		}
	}，
	
    plugins:[
		new webpack.HotModuleReplacementPlugin(),
		new CopyWebpackPlugin([{
			from:''
			to:''
		}]),
		new HtmlWebpackPlugin({
			filename:'a.html',
			template:'',
			title:'',
			minify:{
				removeAttributeQuotes:true,  //打包到一行
				collapseWhitespace:true,
				hash:true,
			}
			chunks:['js1']
		})
	],
	
    mode:'development', // 可以更改模式
	
    resolve：{}， // 配置解析
}

要点：

  1. 配置开发服务器 webpack-dev-server，安装包的时候也要用开发模式
  2. 插件
    • 将html打包到build下可以自动引入生产的js，用插件html-webpack-plugin
    • 多页面（多入口）配合html-webpack-plugin中的chunks
    • Webpack自带的热更新插件，只刷新更改的局部
    • 针对不同的文件类型（style/css/less/sass/stylus），使用不同的loader进行解析。在module中建立匹配规则
    • 同时为了减小文件大小要抽离CSS样式，用extract-text-webpack-plugin，但是会失去热更新功能，故一般上线的时候才抽离。为了解决这个问题，用fallback（保留样式但不抽离）
    • 直接拷贝文件，copy-webpack-plugin插件，from-to路径