关于Webpack

Tap? taq

简介

本质上,webpack是一个现代JavaScript应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个依赖图,此依赖图会映射项目所需的每个模块,并生成一个或多个bundle

官网:https://webpack.docschina.org/

webpack4的新特性

1. mode属性:development或production(不设置mode时,默认为production)
   如:webpack --mode development/production
   
   针对development(开发模式)提供的特性:
   浏览器调试工具
   注释,开发阶段的详细错误日志和提示
   快速和优化的增量构建机制
   
   针对production(生产模式)提供的特性:
   开启所有的优化代码
   更小的bundle大小
   去除掉只在开发阶段运行的代码
   Scope hoisting(把多个bundle放进一个大的闭包里,加快整个代码的运行速度)和Tree-shaking(没有被使用到的模块给去除掉)
   
2. 插件和优化
   删除了CommonsChunkPlugin插件
   它使用内置API optimization.splitChunks和optimization.runtimeChunk,意味着webpack会默认为你生成共享的代码块
   其他插件的变化:

image.png

3. 开箱即用WebAssembly
   这会带来运行时性能的大幅度提升
   可以直接对本地的wasm模块进行import或者export操作,也可以通过编写loaders来直接import C++,C或Rust
   
4. 支持多种模块类型(5种)

image.png

5. 0CJS
  含义是0配置,不再强制使用webpack.config.js作为打包的入口配置文件
  它默认的入口为'./src/'和默认出口'./dist',对小项目来说是福音
  但它仍然有着高度可配置性,可以很好满足你的需求
  
6. 新的插件系统
   提供了针对插件和钩子的新API
   变化如下:

image.png

注:当使用webpack4时,确保使用Node.js的版本要为8.9.4以上

安装webpack

在cmd输入命令:npm install webpack-cli -g (建议不要全局安装)

若想要使用webpack4+版本,你还需要安装webpack-cli:npm install --save-dev webpack-cli

webpack的基本使用

打包命令:webpack --mode development/production 输入文件.js -o 输出文件.js

webpack---入口出口配置文件

配置文件webpack.config.js:
const path=require('path');
//一个文件打包时的配置
module.exports={    
    entry:'输入文件名字',  
    output:{
        path:path.resolve(__dirname,'dist'),  //输出文件的目录路径
        filename:'输出文件名字'
    },
    mode:'production/development'
}

//多个文件打包时的配置 
module.exports={    
    entry:{    //多个文件时
        xxx:'输入文件1',
        xxxx:'输入文件2',
        ...
    },
    output:{
        path:path.resolve(__dirname,'dist'),  //输出文件的目录路径
        filename:'[name].xxx.js'  //动态的输出文件名
    },
    mode:'production/development',  //模式
    module:{},  //模块:如解析CSS,图片如何转换,压缩
    plugins:[],  //插件:用于生产模块和各项功能
}

打开cmd并进入到存放webpack.config.js的目录下,输入命令 webpack 即可进行打包

webpack---加载器url-loader

作用:当某个文件大小小于某个指定size时,会自动转换成DataURL形式(默认为base64)

安装:npm install url-loader --save-dev

webpack.config.js文件配置:
module.exports = {
    module: {
        rules: [
        {
            test: /.(png|jpg|gif)$/i,  //匹配的图片形式
            use: [
            {
                loader: 'url-loader',
                options: {
                    limit: 8192,  //指定size,当小于此size,就会自动转换成DataURL形式(若指定size,可取值false)
                    encoding:指定的编码形式
                },
            },
            ],
        },
        ],
    },
};

webpack---加载器babel-loader

作用:把es6,es7...代码转换成能在浏览器运行的es5代码

安装:npm install -D babel-loader @babel/core @babel/preset-env webpack

webpack.config.js文件配置:
module.exports = {
    module: {
        rules: [
        {
            test: /.m?js$/,  //匹配的文件扩展名
            exclude: /(node_modules|bower_components)/,  //排除掉的文件夹
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],   //转换的规则
                    plugin:[]  //配置相关的插件
                }
            }
        }
        ]
    }
}

webpack---加载器sass-loader

作用:加载 Sass/SCSS 文件并将他们编译为CSS

安装:npm install sass-loader sass webpack --save-dev
(sass-loader需要预先安装Dart Sass或Node Sass。这可以控制所有依赖的版本, 并自由的选择使用的 Sass 实现。)

webpack.config.js文件配置:
module.exports = {
    module: {
        rules: [
        {
            test: /.s[ac]ss$/i,  //匹配sass/scss文件
            use: [   //顺便安装以下用到的模块
                "style-loader",   // 将JS字符串生成为style节点(用来处理css文件中的url()等,把url挂载到js中)
                "css-loader",  // 将CSS转化成CommonJS模块(将css插入到页面的style标签)
                "sass-loader",  // 将Sass编译成CSS
            ],
        },
        ],
    },
};

webpack---关于插件MiniCssExtractPlugin

作用:将 CSS 提取到单独的文件中,为每个包含 CSS 的 JS 文件创建一个 CSS 文件,并且支持 CSS 和 SourceMaps 的按需加载

安装:npm install --save-dev mini-css-extract-plugin

webpack.config.js文件配置:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    plugins: [new MiniCssExtractPlugin({filename:xxx(决定了输出的每个 CSS 文件的名称),chunkFilename:xxx(决定了非入口的 chunk 文件名称),...})],
    module: {
        rules: [
        {
            test: /.css$/i,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
        },
        ],
    },
};

此插件与sass-loader联用时,webpack.config.js文件的配置:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    module: {
        rules: [
        {
            test: /.s[ac]ss$/i,
            use: [
                process.env.NODE_ENV !== "production" ? "style-loader": MiniCssExtractPlugin.loader,
                "css-loader",
                "sass-loader",
            ],
        },
        ],
    },
    plugins: [new MiniCssExtractPlugin({filename: "[name].css", chunkFilename: "[id].css",...})],
};

webpack---关于插件DefinePlugin

作用:允许在编译时创建配置的全局常量,避免代码的冗余,增加灵活性
      这在需要区分开发模式与生产模式进行不同的操作时,非常有用

使用:
var webpack=require('webpack');
new webpack.DefinePlugin({对应的常量:对应的值});

image.png

webpack---关于插件HtmlWebpackPlugin

作用:简化了HTML文件的创建,以便为你的webpack包提供服务(HTML文件打包)
      这对于那些文件名中包含哈希值,并且哈希值会随着每次编译而改变的 webpack 包特别有用
      你可以让该插件为你生成一个HTML文件,使用lodash模板提供模板,或者使用你自己的loader
      
安装:npm install --save-dev html-webpack-plugin

webpack.config.js文件配置:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
    entry: '入口文件名',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '出口文件名',
    },
    plugins: [new HtmlWebpackPlugin({
                title:'xxxx',  //
                filename:'xxx.html',  //生成(输出)的html文件名
                template:'xx.html'  //输入的html文件(可直接在其文件下编写<% htmlWebpackPlugin.options.title%>来引用到title)
    })],
};
这将会把xx.html生成一个包含以下内容的 dist/xxx.html 文件:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>xxxx</title>
    </head>
    <body>
        <script src="出口文件名"></script>
    </body>
</html>

image.png

在多个HTML页面打包的情况下:

image.png

webpack---热替换

需要用到插件:webpack-dev-server
作用:会实时更新服务器显示的内容

安装:npm install webpack-dev-server -D

webpack.config.js文件配置:
module.exports = {
    //...
    devServer: {
        contentBase: path.join(__dirname, 'dist'),  //目标文件所在目录
        compress: true,  //是否启用 gzip压缩
        port: 9000,  //目标端口
        hot:true  //是否热替换(实时更新)(webpack4可以不用说明此属性配置)
    },
};

在package.json文件配置中:
"scripts":{"start":"webpack-dev-server"}

webpack---CSS3前缀
image.png

webpack---图片在HTML和CSS中的打包

CSS中图片打包:

image.png

HTML中图片打包:

image.png

webpack---清除未使用的CSS
image.png

webpack---打包注释

new webpack.BannerPlugin('xxxx(注释)')

webpack---入口文件模块化的配置
image.png

webpack---开发环境与生产环境

devDependencies(开发环境)存放测试代码依赖的包或构建工具的包
dependencies(生产环境)存放项目或组件代码中依赖到的包

安装全部项目依赖包:npm install
安装生产环境依赖包:npm install --production

webpack---资源拷贝

对一些开发技术文档可直接进行拷贝

image.png

阅读 314

想跟上前端大佬步伐的小虫...

19 声望
1 粉丝
0 条评论
你知道吗?

想跟上前端大佬步伐的小虫...

19 声望
1 粉丝
文章目录
宣传栏