Webpack 3.0 的学习笔记(3)
最近跟着技术胖进行学习，这些是学习过程中的笔记，这是webpack3.X的第3篇笔记。
消除无用的css
使用purifyCSS可以大大减少css的冗余
1.安装的命令：安装的webpack的插件
Npm I -D purifycss-webpack purify-css
-D代表的是-save-dev,只是一个简写
2.引入glob（因为要检查html模板）
在webpack.config.js文件头引入glob
Const glob = require('glob');
3.引入purifycss-webpack
Const PurifyCSSPlugin = requrie('purifycss-webpack')
4.配置plugins
在引入完成后，在webpack.config.js里配置plugins,代码如下：
plugins:[
//new uglify()
new htmlPlugin({
minify:{
removeAttrubuteQuotes:true
},
hash:true,
template:'./src/index.html'
}),
new extractTextPlugin("css/index.css"),
new PurifyCSSPlugin({
// Give paths to parse for rules. These should be absolute!
paths: glob.sync(path.join(__dirname, 'src/*.html')),
})
]
这里配置一个paths,主要的是需要找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用
注意：使用这个自动消除css的插件必须配合extract-text-webpack-plugin这个插件使用。
babel转化成ES6
Babel 使用基于js进行了扩展的语言，比如React的JSX
1.安装依赖包：
Cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
2.在webpack中配置babel的方法如下：
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
options:{
presets:[
"es2015","react"
]
}
},
exclude:/node_modules/
}
3.entry.js的代码：
importcss from './css/index.css';
{
let jspangString = 'Hello Webpack'
document.getElementById('title').innerHTML=jspangString;
}
4..babelrc配置
在项目根目录新建.babelrc 文件，并把配置写到文件里
{
"presets":["react","es2015"]
}
5..webpack.config.js里的loader配置
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
},
exclude:/node_modules/
}
6.ENV
安装npm install --save-dev babel-preset-env
然后修改.babelrc里的配置文件：
{
"presets":["react","env"]
}
打包后调试
Source-map 独立 map 行 列
Cheap-moudle-source-map 独立 行 不包括列
Eval-source-map eval js 开发阶段 上线 行 列
Cheap-moudle-eval-source-map 列
开发和生产环境并行
开发环境
生产环境
模块化配置
js的模块化跟webpack的模块化原理是一样的
打包第三方类库：
1.安装Jquery
Npm install --save jquery
2.修改entry.js 文件
Import $ from 'jquery';
这里引入是不需要写相对路径的，因为jquery的包是在node_modules里的，只要写一个名jquery,系统会自动为我们查找的
引入好后我们就可以在entry.js 里使用jquery：
$('#title').html('hello JSpang')；
另外用plugin引入
安装：
在webpack.config.js中引入webpack
Const webpack = require('webpack');
引入成功后配置我们的plugins模块：
Plugins:[
New webpack.ProvidePlugin({
$:"jquery"
})
]
watch 的正确使用方法
watch的配置：
1.在webapck.config.js文件下配置：
watchOptions:{
//检测修改的时间，以毫秒为单位
poll:1000,
//防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存，不进行打包操作
aggregeateTimeout:500,
//不监听的目录
ignored:/node_modules/,
}
2.使用命令进行打包：
Webpack --watch
版权插件：BannerPlugin
在js文件里面配置：
1.new webpack.BannerPlugin("版权归小胖籽所有")
2.在引入使用这个插件之前必须是引入webpack
Const webpack = require("webpack");
抽离第三方类库
1.修改入口文件在webpack.config.js修改：
Entry：{
Entry:'/src/entry.js',
Jquery:'jquery'
},
2.引入optimize插件
new webpack.optimize.CommonsChunkPlugin({
//name对应入口文件中的名字，我们起的是jQuery
name:'jquery',
//把文件打包到哪里，是一个路径
filename:"assets/js/jquery.min.js",
//最小打包的文件模块数，这里直接写2就好
minChunks:2
}),
配置完成后，我们可以先删除以前打包的dist目录，然后用webpack再次打包，你会发现jquery被抽离出来，entry.js文件也变小了。
多个第三方类库抽离
1.先用npm进行安装
Npm install vue --save
注意这里是--save 而不是-save-dev，因为vue在生产环境下也使用到
2.在入口配置中引入vue和jquery
Entry：{
Entry:'/src/entry.js',
Jquery:'jquery',
vue:'vue'
},
3.修改CommonsChunkPlugin配置
new webpack.optimize.CommonsChunkPlugin({
//name对应入口文件中的名字，我们起的是jQuery
name:['jquery','vue'],
//把文件打包到哪里，是一个路径
filename:"assets/js/[name].js",
//最小打包的文件模块数，这里直接写2就好
minChunks:2}),
配置好以后依然直接webpack打包一下，就会发现jquery和vue都被我们分离出来
集中拷贝静态资源
这下面的3步都是在webpack.config.js文件下进行配置的
使用copy-webpack-plugin
1.插件安装：
Cnpm install --save-dev copy-webpack-plugin
2.引入插件
Const CopyWebpackPlugin = require('copy-webpack-plugin')
3.配置插件
new copyWebpackPlugin([{
from:__dirname+'/src/public',
to:'./public'
}])
配置好之后，我们进行webpack打包就可以了，打包完成后会看到你静态文件已经打包到dist文件中了
Json配置文件使用
在webpack1和webpack2里面，你需要引入一个json-loader的loader进来，但是在webpack3,你就不需要另外引入了
读出json内容：
第一步：现在我们的index.html模板中加入一个层，并给层一个Id，为了是在javascript代码中可以方便引用。
第二步：到src文件夹下，找到入口文件，我这里是entry.js文件。修改里边的代码，如下：
var json =require('../config.json');
document.getElementById("json").innerHTML= json.name;
这两行代码非常简单，第一行是引入我们的json文件，第二行驶写入到到DOM中。
第三部：启用我们的npm run server命令就可以在浏览器中看到结果了。
热更新 HotModuleReplacementPlugin
new webpack.HotModuleReplacementPlugin()
现在只要你启动npm run server后，修改index.html中的内容，浏览器可以自动给我们更新出最新的页面。