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 webpack@3.6.0 -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
        创建 .babelrc

3、在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