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中的内容，浏览器可以自动给我们更新出最新的页面。