webpack入门介绍 ---plugins

Posted ZZZ --- jh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack入门介绍 ---plugins相关的知识，希望对你有一定的参考价值。

plugins

plugins(插件)

​ 官网: https://www.webpackjs.com/plugins/

​ 扩展webpack本身的一些功能, 他们会运行在各种模块解析完成以后的打包编译阶段,比如对解析后的模块文件进行压缩等.

htmlWebpackPlugin

​ 在打包结束后, 自动生成一个html文件, 并把打包生成的js模块引入到该html中.

  1. 安装
npm install --save-dev html-webpack-plugin
  1. 在 webpack.config.js 中引入和配置

(创建一个public文件夹下面写空的index.html)

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = 
	...
  plugins: [
      new HtmlWebpackPlugin(
          // 用来生成页面的title元素
          title: "My App",
          // 输出的html文件名,默认是index.html,也可以直接配置子目录
          filename: "app.html",
          // 模板文件路径,支持加载器(loader)
          template: "./public/index.html"
      ) 
  ]
;

  1. 然后package.json运行脚本start

  2. 在public文件夹下的index.html中,title可以通过<%=htmlWebpackPlugin.options.title%>获取配置的title值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
    <h1>html-webpack-plugin</h1>
</body>
</html>

clean-webpack-plugin

​ 删除(清理)构建目录

  1. 安装
npm install --save-dev clean-webpack-plugin
  1. 在 webpack.config.js 中引入和配置

要求是:在打包后的dist文件夹下有public文件夹和app.html,public文件夹里面又包括image文件夹,js文件夹等一系列的

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = 
	...,
    output: 
        path: path.resolve(__dirname, "dist"),
        filename: "public/js/app.js"
    ,
    module: 
        rules:[
            ...,
            
                test: /\\.(png|jpe?g|gif)$/i,
                use:
                    loader : 'url-loader',
                    options: 
                        outputPath:'/public/image',
                        publicPath:'./public/image',
                        limit: 1000
                    
                
            ,
         	,,,
        ]
    ,
	plugins: [
        ...,
        new CleanWebpackPlugin(),
	]

mini-css-extract-plugin

​ 提取css到一个单独的文件中

​ 异步加载; 无重复性编译(性能); 更容易使用; 特定于css;

  1. 安装
npm install --save-dev mini-css-extract-plugin
  1. 在 webpack.config.js 中引入和配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = 
    ...,
    module: 
        rules:[
            ...,
            
                test: /\\.css$/,
                // use: ['style-loader',
                // 
                //     loader:'css-loader',
                //     options: 
                //         // 启用/禁用 url() 处理
                //         url: true,
                //     
                // ],
                use: [
                        loader: MiniCssExtractPlugin.loader
                    ,
                    
                        loader:'css-loader',
                        options: 
                            // 启用/禁用 url() 处理
                            url: true,
                        
                    ]
            
        ]
    ,
    plugins: [
        ...,
        new MiniCssExtractPlugin(
            // filename 确定每个输出css文件的名称.
            filename: './public/css/app.css'
        ),
    ]
  1. cs.css中引入图片(src下的cs.css,它和data文件夹是同级目录)
body
    background: rgb(47, 255, 203);
    background: url('./data/-26953ed6fb615e2a.jpg');
    color: red;

​ 注意: 在mini-css-extract-plugin中的webpack.config.js 中配置时注意不能使用style-loader,要将她进行修改

​ ./ 是相对路径,起点是文件自身

​ / 是根路径

sourceMap

​ 一个记录了编译后代码与源代码的映射关系的文件.(解释映射: 在打包的dist文件夹下的public下的js文件夹里面有app.js和app.js.map,他俩就是映射关系,app.js.map是将app.js中的每一行每一列都遍历出来)

​ 运行在浏览器的代码是打包合并过的,不利于调试和错误定位,就是解决这个的.

​ 对浏览器报错的行数更精准

  1. src文件夹下新建一个a.js
export default ()=>
    console.log('fn');
  1. index.js中引入
import a from './a.js'

document.onclick = function()
    console.log(a);
    a();


console.log('123456789')
  1. 在 webpack.config.js 中配置
module.exports = 
    mode: 'production',
  	devtool: 'source-map', //注意存放位置
  	...

WebpackDevServe

​ 解决每次代码都需要重新编译打包,刷新浏览器

  1. 安装
npm install --save-dev webpack-dev-server
  1. 在package.json 中添加 scripts
"scripts": 
    ...,
    "server": "webpack serve --open"
  ,
  1. 修改 webpack.config.js
module.exports = 
  ...,
  devServer: 
        // 生成的虚拟目录路径
        contentBase: "./dist",
    
  		// 打开网站时所在的页面  
    	// 如果加了这个打包后直接弹出的页面就是app.html页面
    	// openPage:'app.html',
    	// index:'app.html',
    	
        // 自动开启浏览器
        open: true,
        // 端口
        port: 8081

  1. 在黑窗口输入npm run server 会直接跳出来网页

  2. 然后在http://localhost:8080后面写/app.html直接进入页面.

备注: 启动服务器后,dist里面就没有任何东西了,就直接存在了内存中(同时虚拟了一个存放目录路径),后期更新编译打包和访问速度大大提升.

​ 注意: 这样在修改index.js里面的内容时就会实现热更新,浏览器的控制台会实时更新.

​ 注意: config.js这个配置文件无论是vue还是webpack中, 修改了之后, 都需要重新启动项目才可以生效

​ 注意: 加了openPage:'app.html',和index:'app.html',都是打包后直接弹出的页面就是app.html页面,需要两个都加,如果只加一个的话可能出来就会直接下载点其他小的东西

Hot Module Replacement

​ 流程(理解下面那段话): src => live reload => server => chrome

​ 在之前当代码有变化，使用的 live reload，刷新整个页面，但只修改了很小的内容，也刷新了整个页面，无法保持页面操作状态。HMR 就出现了，它的核心的局部（模块）更新，也就是不刷新页面，只更新变化的部分

  1. 修改 webpack.config.js
module.exports = 
  ...,
  devServer: 
        // 生成的虚拟目录路径
        contentBase: "./dist",
  		// 打开网站时所在的页面  
    	// 如果加了这个打包后直接弹出的页面就是app.html页面
    	openPage:'app.html',
    	index:'app.html',
        // 自动开启浏览器
        open: true,
    	// 开启热更新
        hot:true,
        // 即使 HMR 不生效，也不去刷新整个页面(选择开启)
        hotOnly:true,
        // 端口
        port: 8081,
  1. index.js里面修改内容的时候 页面只是局部加载,不会整个更新

注意:

  1. mini-css-extract-plugin 是异步加载,无重复性编译(性能);特定于css

  2. 在mini-css-extract-plugin 中的webpack.config.js中配置时注意不能使用style-loader,要将它进行修改

  3. ./ 是相对路径,起点是文件自身;

    / 是根路径

  4. WebpackDevServe 这样在修改index.js里面的内容时就会实现热更新,浏览器的控制台会实时更新.

  5. config.js这个配置文件无论是vue还是webpack中, 修改了之后, 都需要重新启动项目才可以生效

  6. 加了openPage:'app.html',和index:'app.html',都是打包后直接弹出的页面就是app.html页面,需要两个都加,如果只加一个的话可能出来就会直接下载点其他小的东西

总结:

plugins(插件)

  • HtmlWebpackPlugin 在打包后自动生成一个html文件,并把打包生成的js模块引入到该html中.
  • clean-webpack-plugin 删除(清理)构建目录
  • mini-css-extract-plugin 提取到一个单独的文件中
  • sourceMap 对浏览器报错的行数更精准.
  • WebpackDevServe 解决每次代码都需要重新编译打包,刷新浏览器
  • Hot Module Replacement 流程 就是src => live reload => server => chrome

以上是关于webpack入门介绍 ---plugins的主要内容，如果未能解决你的问题，请参考以下文章

webpack入门介绍 --- loaders

webpack入门介绍 --- loaders

webpack入门——webpack 介绍

webpack入门——webpack 介绍

webpack入门介绍及简单配置

webpackt入门1：webpack介绍&webpack安装&使用webpack打包