Fork me on GitHub

Webpack学习

一、Webpack是什么

Webpack是基于模块化打包的⼯具。

1. 模块化:

  • 模块化:将大的文件拆分成互相依赖的小文件,再进行通一的拼装和加载;
  • JS的模块化:利用Webpack+babel的模式将所有模块系统进行打包,同步加载,也可以搭乘多个chunk异步加载;
  • CSS的模块化:sass、less等预处理器虽然实现了css的拆分,但是没有解决模块化很重要的全局污染问题。被认可的方案是css modules,利用浏览器的script标签,type类型选modules类型即可。所有的css文件由js管理,例如vue中的scope。
  • 资源的模块化:任何资源都可以模块化
  • 模块化的优点:
    • 目录结构清晰化;资源处理集成化;项目依赖单一化

Webpack最核心的功能就是让我们可以进行模块化开发,js、css、图片、json等在webpack中都可以被当做模块来使用。

2. 打包:

  • 打包就是利用webpack把各种资源合成一个或者多个包(bundle);
  • 在打包的过程中,可以对资源进行处理,例如:压缩图片、将scss转换成css、将es6语法转成es5语法、将ts转成js等等;

二、Webpack的使用

1. 打包命令

webpack 被打包文件(入口文件)  打包之后的文件(出口文件) --mode=development(production)

// 其中development表示开发环境,production表示生产环境

2. 配置webpack.config.js文件

每次打包都要写入口文件和出口文件非常麻烦,这时候可以配置webpack.config.js文件,运行时候直接读取:

const path = require('path');
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

三、Webpack的loader

1. loader的使用过程

  • 步骤一:通过npm安装需要使用的loader
  • 步骤二:在webpack.config.js文件中的modules关键字下进行配置

 

const path = require('path');
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.less$/,
                use: [{ loader: 'style-loader' },
                        { loader: 'css-loader' },
                        { loader: 'less-loader' },
                    ]
                    // 将 Less 编译为 CSS
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192, // 小于limit,就用base64编码
                        name: 'img/[name].[hash:8].[ext]'
                    }
                }]
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        // presets: ['@babel/preset-env']
                        presets: ['es2015']
                    }
                }
            },
        ],
    },
}

2. css-loader:加载css文件,但是不负责将css样式嵌入到文档中

3. style-loader:把css代码注入到js代码中,通过dom操作加载css样式

注意: use: ['style-loader', 'css-loader']的顺序,因为webpack读取是从右到左读取的,要先使用css-loader加载再使用style-loader嵌入。

4. less-loader:将.less文件转换成.css文件

5. url-loader:在文件小于limit的情况下以base64的方式把文件内容注入到代码中

6. file-loader:把⽂件输出到⼀个⽂件夹中

{
    test: /\.(png|jpg|gif)$/i,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 8192, // 小于limit,就用base64编码
             name: 'img/[name].[hash:8].[ext]'
             }
         }]
},

图片文件处理:

name: 'img/[name].[hash:8].[ext]'
// img:文件要打包到的文件夹
//name: 获取图片原来的名字
//hash8:为了防止图片名称冲突
//ext:使用图片原来的扩展名

7. babel-loader:把 ES6 转换成 ES5

四、常见的Plugin

1. BannerPlugin:添加版权声明

2. HtmlWebpackPlugin:打包html文件到dist文件夹中

3. uglifyjs-webpack-plugin:通过 UglifyES  压缩 ES6  代码

plugins: [
    new webpack.BannerPlugin('最终版权归大家所有'),
    new HtmlWebpackPlugin({ template: 'index.html' }),
    new uglifyjsWebpackPlugin(),
    // new webpack.LoaderOptionsPlugin({
    //     options: {
    //         devserver: {
    //             minimize: true
    //         }
    //     }
    // })
],

4. loader和plugin的区别:

作用不同:

  • loader:主要用于转换某些类型的模块,是一个转换器;
  • plugin:插件,对webpack本身的扩展,是一个扩展器

用法不同:

  • loader:在 module.rules 中配置,也就是说他作为模块的解析规则⽽存在。 类型为数组,每⼀项都是⼀个 Object ,⾥⾯描述了对于什么类型的⽂件( test ),使⽤什么加载 ( loader ) 和使⽤的参数( options );
  • plugin:在 plugins  中单独配置。 类型为数组,每⼀项是⼀个 plugin  的实例,参数都通过构造函数传⼊。

 

五、使用Webpack优化项目

  • 对于 Webpack4,打包项目使用 production 模式,这样会自动开启代码压缩
  • 使用 ES6 模块来开启 tree shaking,这个技术可以移除没有使用的代码
  • 优化图片,对于小图可以使用 base64 的方式写入文件中
  • 按照路由拆分代码,实现按需加载
  • 给打包出来的文件名添加哈希,实现浏览器缓存文件
posted @ 2021-05-12 16:01  zerozhupan  阅读(93)  评论(0)    收藏  举报