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命令就可以在浏览器中看到结果了。

热更新

其实在webpack3中启用热加载相当的容易,只要加入HotModuleReplacementPlugin这个插件就可以了。

new webpack.HotModuleReplacementPlugin()

现在只要你启动npm run server后,修改index.html中的内容,浏览器可以自动给我们更新出最新的页面。

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 11,699评论 7 109
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 8,536评论 0 21
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 7,168评论 7 35
  • 2017年8月16日,我辞职了。 2015年3月28日入职,开始做英语培训。至今约有两年半时间,关于工作开始有了自...
    遇见小沈儿阅读 368评论 12 7
  • 2017.7.2 周天 晴 加入特训营已经一周了,除了忙碌,还有很多收获。 每天已经习惯早...
    咨羽阅读 61评论 0 0