webpack4学习笔记(一)

什么是webpack

webpack核心是一个模块打包工具,webpack安装时不建议全局安装:全局安装的webpack版本可能和某一个项目的webpack版本不匹配,导致项目运行失败。

webpack-cli的作用是为了可以在命令行里使用webpack命令 webpack基本配置:

const path = require('path');
module.exports = {
    mode: 'production',  // production代码会被压缩为一行,development不会被压缩
    entry: './src/index.js', // 入口文件
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist') // _dirname是值webpackconfig文件所在目录的路径, 生成一个名叫bundle文件的绝对路径
    }
}
1
2
3
4
5
6
7
8
9

entry与output

entry作为入口,即可以设置为字符串也可以设置为对象,下面两种写法实现的是一样的效果,在output没有设置输出文件名时,默认的输出文件js文件名为main.

entry: './src/index.js',
1
entry: {
        main: './src/index.js',
    }, // 入口文件
1
2
3

output文件作为输出,可以设置输出的文件名以及文件路径

output: {
        filename: 'bundle.js', 
        path: path.resolve(__dirname, 'dist') // _dirname是值webpackconfig文件所在目录的路径, 生成一个名叫bundle文件的绝对路径
    },
1
2
3
4

如果我们遇到需要打包多个入口文件的需求,我们可以这样设置entry和output,最终会在dist文件夹下生成main.js和sub.js两个文件。

entry: {
        main: './src/index.js',
        sub: './src/index.js'
    }, // 入口文件
    output: {
        publicPath: 'http://cdn.com.cn',
        filename: '[name].js',  // entry对应的key值
        path: path.resolve(__dirname, 'dist') // _dirname是值webpackconfig文件所在目录的路径, 生成一个名叫bundle文件的绝对路径
    },
1
2
3
4
5
6
7
8
9

loader是什么

loader是一个打包方案,当webpack遇到一些文件不知如何打包时,可以求助loader,loader知道如何打包这些文件。

file-loader

webpack图片打包可以使用file-loader,通过在module里面设置rule来实现。

module: {
        rules: [{
            test: /\.png/,
            use: {
                loader: 'file-loader'
            }
        }]
    },
1
2
3
4
5
6
7
8

filr-loader帮助我们做了两件事情:
1.当遇到图片文件时会将其打包移动到dist目录下
2.接下来会获得图片模块的地址,并将地址返回到引入模块到变量之中。

如果需要打包后文件有所要求,例如输出名称,存放地址等,我们可以在options里面进行设置

module: {
        rules: [{
            test: /\.(png|jpg|gif|svg|jpeg)$/,
            use: {
                loader: 'file-loader',
                options: {
                    // placeholder 占位符
                    name: '[name]_[hash].[ext]',
                     // 图片存储文件
                    outputPath: 'images/'
                }
            }
        }]
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

url-loader

url-loader基本上可以实现上述file-loader的功能,但是有一区别就是经过url-laoder打包后的dist文件下是不存在image文件的,这是因为url-loader会把图片转换成base64的字符串直接放在bundle.js里面。
好处:
1.直接将图片打包到js里,不用额外到请求图片,省了http请求
坏处:
1.如果遇到打包到文件非常大,那么加载会加载很长时间,影响体验

url最佳使用方式:如果图片很小,只有1-2kb,可以直接打包到js文件里,如果图片很大,可以使用file-loader的打包方式,打包到images里面。

options: {
                    // placeholder 占位符
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    // 小于200kb则打包到js文件里,大于则打包到imgages里
                    limit: 204800
                }
1
2
3
4
5
6
7

样式打包

webpack通常不知道怎么打包css文件,我们想要实现样式打包,通常需要借助style-loader, css-loader

rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader']
}]
1
2
3
4
5

style-loader和css-loader的作用:
1.css-loader帮助我们分析几个css文件的关系,并合成一个文件
2.style-laoder获得文件后,会把文件挂载到header中

sass-loader

我们通常需要打包sass、less等样式文件,我们需要使用sass-laoder.
安装:

npm install sass-loader node-sass  --save-dev
1
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}]
1
2
3
4
5

loader的执行顺序是从下至上,从右到左来执行。

postcss-loader

我们写样式代码时,为了实现不同浏览器兼容,通常会手动添加厂商前缀,但是这样非常的影响开发效率。现在postcss-loader提供自动添加厂商前缀的功能,但是需要配合autoprefixer插件来使用。
postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
1
2
3
4
5

webbpack配置:

{
            test: /\.scss$/,
            use: ['style-loader', ‘css-laoder’, 'sass-loader', 'postcss-loader']
        },
1
2
3
4

css-loader

我们经常会遇到在一个样式文件引用另一个文件,但是webpack打包时,被引入的文件不会走'sass-loader', 'postcss-loader',而去走css-laoder,如果需要被引入的文件安装正常的顺序来走loader,可以通过css-loader的importLoaders来实现。

rules: [
        {
            test: /\.scss$/,
            use: ['style-loader', 
            {
                loader: 'css-loader',
                options: {
                    importLoaders: 2,
                }
            }, 'sass-loader', 'postcss-loader']
        },
]
1
2
3
4
5
6
7
8
9
10
11
12

css-module

CSS-Module 是一个 css 模块化解决方案,可以通过webpack 在 css-loader 配置 css-module ,开启后默认局部作用域.即样式文件只作用于该模块,不会和其他样式文件耦合。用于解决以下问题:

  • 全局污染
  • 命名混乱
  • 依赖管理不彻底
  • 无法共享变量
  • 代码压缩不彻底

我们可以设置modules: true来开启css-module.

rules: [
        {
            test: /\.scss$/,
            use: ['style-loader', 
            {
                loader: 'css-loader',
                options: {
                    importLoaders: 2,
                    // modules: true
                }
            }, 'sass-loader', 'postcss-loader']
        },
]
1
2
3
4
5
6
7
8
9
10
11
12
13

图标打包

通过新增rule来实现图片打包

rules: [
        {
            test: /\.(eot|ttf|svg)$/,
            use: {
                loader: 'file-loader'
            }
        },]
1
2
3
4
5
6
7
最后更新时间: 10/9/2019, 9:28:44 AM