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

常用的插件：

npm install  webpack  webpack-cli  webpack-dev-server  css-loader  style-loader 
mini-css-extract-plugin   html-webpack-plugin less less-loader   clean-webpack-plugin url-loader  html-withimg-loader  file-loader -D 

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

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

一、首先安装loader

npm install file-loader html-withimg-loader  url-loader -D
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 = img
document.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中的key
          chunkFilename:'[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的话，可以获得sourcemap
                    sourceMap: 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/[email protected]@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优化

待续…

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