webpack学习笔记1

1.webpack是一个js静态模块的打包工具，将各个模块打包集合。

2.概念：

entry：模块的入口位置

output：出口，输出bundle的地方。 属性path，filename

loader：处理非js文件，将其处理为可处理的模块。

plugins：插件，通过const plu = require(plugins)使用，并在plugins:[new plu({template:path})]创建实例

mode：模式，development 或 production

3.entry

//(单个入口或多入口) 
const config = ｛
entry：string|[ ]    
｝
 module.exports = config

//对象语法,拓展（单页面）
const  config = ｛
entry :｛
	app：‘app.js’,
	vendors:'vendors.js'
	｝
｝

//多页面
const config = ｛
entry：｛
	pageOne：‘one.js’,
	pageTwo:'two.js',
	pageThree:'three.js'
	｝
｝

4.output

//单个出口
const config = {
	output:{
		filename:‘bundle.js’
		path:'绝对路径'
	｝
｝
module.export = config

//多个出口,使用占位符
const config = {
	entry:{
		app:'app.js',
		search:'search.js'
	},
	output:{
		filename:'[name].js',
		path:_dirname + '/dist'
	}
}

//使用CDN
output：｛
	path:'./[hash]',
	publicPath:'https://cdn.example.com/assets/[hash]/'
｝
//如果不知道publicPath，可以先忽略并且在入口设置
_webpack_public_path_ = myRuntimePublicPath

5.loader

//下载需要转换的loader
npm install --save-dev css-loader
npm install --save-dev ts-loader

//处理对应的文件
module.exports = {
	rules:[{
		test:/\.css$/,
		use:[
			{loader:'style-loader'},
			{loader:'css-loader',
			options{
				modules:true
			}}
		]
	}]