WebPack4.0拿去即用系列(二)

Loader

一、 什么是Loader
通过使用不同的Loader，Webpack可以要把不同的文件都转成JS文件,比如CSS、ES6/7、JSX等
test：匹配处理文件的扩展名的正则表达式
use：loader名称，就是你要使用模块的名称
include/exclude:手动指定必须处理的文件夹或屏蔽不需要处理的文件夹
query：为loaders提供额外的设置选项

举个例子，如果你此时去去js中导入css，打包过后会报错，为什么，因为webpack默认引入的文件都当作js处理，那怎么办？此时就需要loader

常用loader： npm install css-loader style-loader less-loader url-loader html-withimg-loader file-loader

url-loade可以将指定大小及以下的图片文件转成base64写入js，避免额外请求图片资源，如果超过指定大小再使用
file-loader打包图片文件。
html-withimg-loader：让html也支持图片获取

• 当然了，还有更多，根据实际需要添加

二、 loader三种写法

加载CSS文件，CSS文件有可能在node_modules里，比如bootstrap和antd

写法一loader

    module: {
    rules: [{
    test: /\.css/,loader:['style-loader','css-loader']}]}

写法二 use

module: {
    rules: [{
    test: /\.css/,use:['style-loader','css-loader']}]},

写法三use+loader

    module: {
    rules: [{
    test: /\.css/,include: path.resolve(__dirname, "./public/css"),//包含指定文件夹exclude: /node_modules/,                        //排除某些可能含有相同类型文件的文件夹use: [{
    loader: "style-loader",options: {
    insertAt: "top"                          //从什么位置放入style}}, "css-loader"]},{
    test: /\.less/,                                  //解析lessinclude: path.resolve(__dirname, "./public/css"),use: [{
    loader: "style-loader",options: {
    insertAt: "top"}}, "css-loader","less-loader"]}]},

提示：如果没能执行成功很可能是在js页面没有导入资源

import "../public/css/index.less"

html，css，js图片支持和压缩处理

url-loade可以将指定大小及以下的图片文件转成base64写入js，避免额外请求图片资源，如果超过指定大小再使用
file-loader打包图片文件。
html-withimg-loader：让html也支持图片获取

 module: {
    rules: [{
    test:/\.jpg|.png|.gif/,use:{
    loader:"url-loader",options:{
    limit:8*1024   //此处可以做限制，大于多少k就以图片形式呈现，默认base64}]},
JS引入图片*import img from "./m.jpg"let png=new Image()png.src = imgdocument.getElementById("root").appendChild(png)css引入图片.logo{
    background-image: url(./images/logo.png);}html 引入图片module: {
    rules: [{
    test:/\.html/,use:{
    loader:"html-withimg-loader",options:{
    limit:8*1024   //此处可以做限制，大于多少k就以图片形式呈现，默认base64}]}

css样式抽离

因为CSS的下载和JS可以并行,当一个HTML文件很大的时候，我们可以把CSS单独提取出来加载生成link
将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap
只能用在webpack4中，对比另一个插件 extract-text-webpack-plugin:
1，异步加载
2，不重复编译，性能更好
3，更容易使用
4，只针对CSS

mini-css-extract-plugin

filename 打包入口文件
chunkFilename 用来打包import(‘module’)方法中引入的模块

一、下载并引入mini-css-extract-plugin

const minicssplugin=require("mini-css-extract-plugin")

二、在plugins实例化并指定output规则

    new minicssplugin({filename: '[name].css',      //name :entry中的keychunkFilename:'[id].css'})

三、在将rules中css的loader替换

 rules: [{test: /\.css/,include: path.resolve(__dirname, "./src"),use: [{loader: minicssplugin.loader,   //换成options: {insertAt: "top"}}, "css-loader", "less-loader"]},

压缩css和js

下载引入对应的插件

cnpm i uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin -D

一、引用

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

二、配置压缩参数

   const UglifyJsPlugin = require("uglifyjs-webpack-plugin");const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");module.exports = {mode: 'development',optimization: {minimizer: [new UglifyJsPlugin({cache: true,//启动缓存parallel: true,//启动并行压缩//如果为true的话，可以获得sourcemapsourceMap: true // set to true if you want JS source maps}),//压缩css资源的new OptimizeCSSAssetsPlugin({})]},

解析TS

一、安装全局TS

cnpm install typescript -g

二、初始化TS编译环境

tsc -init

三、安装ts-loader

cnpm install typescript  ts-loader -D

四、配置规则

 rules: [{test: /\.ts$/,use: {loader: "ts-loader"},include: path.resolve(__dirname, "./src/ts"),         //只索引某个文件夹下exclude: path.resolve(__dirname, "./node_modules/")   //不索引某文件夹}]

css添加前缀

一、安装 cnpm install postcss-loader autoprefixer -D
二、根目录创建postcss.config.js文件
内容：
module.exports={ autoprefixer:require("autoprefixer") //此处还可以添加({...args})指定兼容版本，此处略 }
三、在css rules中增加 postcss-loader

 rules: [{test: /\.css/,include: path.resolve(__dirname, "./src"),use: [{loader: minicssplugin.loader,options: {insertAt: "top"}}, "css-loader", "postcss-loader"]}]

解析ES6、ES7、react，装饰器

一、安装插件

cnpm install babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react babel-plugin-transform-decorators-legacy babel-loader@7 install babel-plugin-transform-runtime  babel-polyfill -D

二、创建.babelrc文件

{//注意此处的匹配顺序从下往上顺序匹配解析"presets":["env","react","stage-0"]，"plugins":["transform-runtime","transform-decorators-legacy"]
}

三、在需要转义的页面填写（或者抽取公共）

import "babel-polyfill"

四、修改webpack.config.js

   rules: [{{test: /\.js$/,use: {loader: 'babel-loader'},include: path.join(__dirname,'src'),exclude:/node_modules/}]

使用第三方库比如JQ

一、安装你想要的插件如jquery

cnpm install jquery

方式1、使用wbepack自带插件

const webpack = require("webpack")

方式2、使用暴露插件

cnpm install expose-loader
let $require("expose-loader?$!jquery");   //js文件中直接使用

方式3如果直接以cdn的形式引入外部库的时候，再webpack.config.js添加如下

external:{ //指定使用外部引用资源，不用打包"jquery":"$"
},

js中引用

let $=require("jquery") //即可使用jquery

转发代理

直接转发

devServer: {port: 8008,proxy:{          //当我本地发起服务端请求时，以/api开头的请求，均转发到指定api"/api":"http://localhost:3000"}}

修改路径

proxy: {"/api": {target: 'http://localhost:3000',pathRewrite:{"^/api":""}        }            
}

//内置server内置模拟数据策略

  devServer: {contentBase: path.resolve(__dirname, "./dist"),host: "localhost",compress: true,port: 8008,hot: true,before(app){   app.get("/api/user",function(req,res,next){     //模拟请求数据res.json({username:"harry",age:27})})}},

//讲webpackServer集成到我们自己的Server中
一、安装中间件

  cnpm install webpack-dev-middleware

二、在server中引入中间件

   let app=express()
1、let webpackDevMiddleware=require(" webpack-dev-middleware")
2、let config=require("./webpack.config")
3、let webpack=require("webpack")
4、let compiler=webpack(config)
5、 app.use(webpackDevMiddleware(compiler))
app.listen(3000)

resolve解析

一、不加扩展名，依次匹配

resolve: {extensions: [".js",".jsx",".json",".css"]
},

二、配置别名可以加快webpack查找模块的速度

引入bootstrap模块的时候，直接引入bootstrap,不需要从node_modules文件夹中按模块的查找规则查找

const bootstrap = path.resolve(__dirname,'node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.css');
resolve: {alias:{"bootstrap":bootstrap}
},

三、 modules
对于直接声明依赖名的模块（如 react ），webpack 会类似 Node.js 一样进行路径搜索，搜索node_modules目录
这个目录就是使用resolve.modules字段进行配置的 默认配置

resolve: {
modules: ['node_modules'],
}

限制查找范围，后面还可以自定义文件夹，如 module

resolve: {
modules: [path.resolve(__dirname, 'node_modules'，'module')，path.resolve(__dirname, 'module')],
}

四、mainFields
默认情况下package.json 文件则按照文件中 main 字段的文件名来查找文件

resolve: {// 配置 target === "web" 或者 target === "webworker" 时 mainFields 默认值是：mainFields: ['browser', 'module', 'main'],// target 的值为其他时，mainFields 默认值为：mainFields: ["module", "main"],
}

五、mainFiles
当目录下没有 package.json 文件时，我们说会默认使用目录下的 index.js 这个文件，其实这个也是可以配置的

resolve: {mainFiles: ['index'], // 你可以添加其他默认使用的文件名
},

六、resolveLoader
resolve.resolveLoader用于配置解析 loader 时的 resolve 配置,默认的配置：

module.exports = {resolveLoader: {modules: [ 'node_modules' ],extensions: [ '.js', '.json' ],mainFields: [ 'loader', 'main' ]}
};

webpack优化

待续…

如有错误，敬请留言指点，我立马改正，以免误导他人~谢谢！