webpack小结
（1）模块化:
模块化是一种将系统分离成独立功能部分的方法，严格定义模块接口、模块间具有透明性
（2）现代化模块化方法：
commonJs（node里面），主要使用require
AMD/CMD
es6Module
（3）模块化的实质：高内聚，低耦合
（4）webpack的goals:
1、拆分依赖到代码块按需加载
2、快速初始化加载
3、所有的静态资源都可以当做模块
4、第三方库模块化
5、自定义模块打包
6、适合大型项目（5）webpack的安装
npm install webpack -g
（6）config 属性配置
entry：配置入口文件 output：配置编译后的资源 resolve：配置资源别名/拓展名等
resolve:{
extensions:[".js",".css",".scss"]
}
plugins：插件，比loader更强大 module :
（7）创建一个webpack3.6.0版本脚手架
1、首先全局安装webpack，命令终端输入 ： npm install -g webpack 2、新建一个文件夹目录，并且进入该目录 3、npm init 4、再本地安装webpack：npm install --save-dev webpack (最高版本4.0) 5、回退到之前的版本：npm install [email protected] -g (回到了3.6.0版本) 6、安装plugins命令行 ： npm install html-webpack-plugin --save-dev 7、安装css loader命令行 ： npm install --save-dev css-loader style-loader 8、安装sass loader 命令行 ： npm install sass-loader node-sass --save-dev
rules:[
{
test: /.css$/,
use: ['style-loader', 'css-loader']
},
{
test:/.scss$/,
use:['style-loader', 'css-loader',"sass-loader"]
}
]
9、有时候需要将处理好的scss和css放在一个文件夹里
安装插件： npm install --save-dev extract-text-webpack-plugin ？？？？
10、常用的开发调试服务器：webpack-dev-server
先全局安装
npm install -g webpack-dev-server
npm install --save-dev webpack-dev-server
运行命令
webpack-dev-server
（7）安装react的环境
1、安装react : npm install --save react react-dom
2、建立babel :
安装命令 npm install --save-dev babel-core babel-preset-react babel-preset-env
创建 .babelrc3、在webpack使用babel-loader，需要一个loader来转化react代码
命令行：npm install --save-dev babel-loader
配置文件：
（8）清理文件：clean-webpack-plugin
例如：清理多次缓存文件 1、安装clean-webpack-plugin 插件： npm i clean-webpack-plugin --save-dev 2、配置配置文件
（9）配置多个HTML文件
1、 还是使用html-webpack-plugin插件来实现
2、就是多次new几个实例，来创建不同的模板
3、添加多个入口文件，在不同的实例里选择所需要的文件
chunks和excludeChunks
chunks表示需要的文件集合，excludeChunks是不需要的文件的集合
（10）HTML的模板pug(jade)
可以让你以更好的语法来写html
1、新建index.pug
2、安装装载器。命令行 npm install --save-dev pug pug-html-loader raw-loader
3、配置配置文件
{
test:/.pug$/,
loader:["raw-loader","pug-html-loader"]
}
4、编写pug文件，修改配置文件，将index.html，换成index.pug
index.pug:注意层级关系
doctype html
html(lang = "en")
head
title=pageTitle script(type = "text/javascript"). if(foo) bar(1+5)
body
include includes/header.pug h1 Pug - node template engine ul li template li template li template
配置配置文件
new HtmlWebpackPlugin({
filename:"index.html",
template:__dirname +"/src/index.pug",
excludeChunks:['contact']
}),
（11）模块热替换HMR
模块热替换：修改了模块，不用刷新浏览器，就能自动生效
1、启用热替换
配置文件：devServer:{
port:9090, open:true, hot:true
}
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
注意：热替换不能在extract-text-webpack-plugin使用的时候生效，所以只有停用这个插件，才能使得热替换生效
（12）生产环境VS开发环境
1、配置package.json 给生产命令行模式设置生产模式
"prod":"set NODE_ENV=production & webpack -p"
"scripts": {
"dev":"webpack-dev-server", "prod":"set NODE_ENV=production & webpack -p"
},
2、配置webpack.config.js
区分不同的配置，设置不同的模式
var isProd = process.env.NODE_ENV === "production";
（13）定义全局变量
插件：webpack.DefinePlugin
（14）加载图片
解析url的图片链接 1、安装file-loader：将file变成导出字符串的过程中，还能进行压缩处理
npm install --save-dev file-loader
2、配置文件：此时图片的链接都是编译了的一串字符，
test:/.(gif|png|jpe?g|svg)$/i,
use:[{
loader:"file-loader"
}]
如果需要原本的名字和路径显示，则需要配置option
test:/.(gif|png|jpe?g|svg)$/i,
use:[{
loader:"file-loader",
options:{
name:'[name].[ext]',
outputPath:'images/'
}}]
解析src中的图片链接
1、安装html-loader：将html变成导出字符串的过程中，还能进行压缩处理
npm install --save-dev html-loader
2、配置文件：
{
test:/\.html$/,
use:[{
loader:"html-loader",
options:{
minimize:true
}}]
}
压缩图片
希望图片的体积小点，发到生产环境图片更加小
1、安装image-webpack-loader