小柒

www.xiaoqi.cn

0%

打包资源

发表于 更新于 分类于 ，

打包样式资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const {resolve} =require('path')
module.exports={
    entry:'./src/index.js',
    //输出
    output:{
        //输出文件名
        filename:'built.js',
        //输出路径,_dirname node.js的变量，代表当前文件的目录绝对路径
        path:resolve(__dirname,'build')

    },
    //loader配置
    module:{
        rules:[
            //匹配哪些文件
            {test:/\.css$/,
            //使用哪些loader
            use:[
                //use数组中loader执行顺序从右到左，从下到上一次执行
                //创建style标签，将js中的样式资源插入进行，添加到head中生效
                'style-loader',
                //将css文件变成commonjs模块加载到js中，里面内容是样式字符串
                'css-loader'
            ]},
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader',//将less文件编译成css文件
                ]
            }

        ]
    },
    plugins:[
        
    ],
    mode:'development'

}

打包html资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
const {resolve} =require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    entry:'./src/index.js',
    //输出
    output:{
        //输出文件名
        filename:'built.js',
        //输出路径,_dirname node.js的变量，代表当前文件的目录绝对路径
        path:resolve(__dirname,'build')

    },
    //loader配置
    module:{
        rules:[
            //匹配哪些文件
            {test:/\.css$/,
            //使用哪些loader
            use:[
                //use数组中loader执行顺序从右到左，从下到上一次执行
                //创建style标签，将js中的样式资源插入进行，添加到head中生效
                'style-loader',
                //将css文件变成commonjs模块加载到js中，里面内容是样式字符串
                'css-loader'
            ]},
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader',//将less文件编译成css文件
                ]
            }

        ]
    },
    plugins:[
        //html-webpack-plugin默认会创建一个空的HTML,自动引入打包输出的所有资源（js/css）
        //需求：需要有结构的HTML文件
        new HtmlWebpackPlugin({
            //模板比对'src/index.html'文件，并自动引入打包输出的所有资源(js/css)
            template:'./src/index.html'
        })
    ],
    mode:'development'
}

打包图片

html-loader 以相同的方式处理 <img src="./my-image.png" />。需要npm i html-wepack-plugin

[]: https://webpack.docschina.org/loaders/html-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//处理图片
          {
              test:/\.(png|svg|jpg|jpeg|gif)$/i,
              type:'asset/resource',

          },
             //将html导出为字符串
          {
              test:/\.html$/i,
              loader:"html-loader",
          },
          //处理字体
          {
              test:/\.(woff|woff2|eot|ttf|otf)$/i,
              type:'asset/resource'
          },

打包xml,csv文件

可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from './data.json' 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。让我们处理加载这三类文件：

1
npm install --save-dev csv-loader xml-loader
1
2
3
4
5
6
7
8
{
      test: /\.(csv|tsv)$/i,
      use: ['csv-loader'],
    },
    {
      test: /\.xml$/i,
      use: ['xml-loader'],
    },

打包toml,yaml,json5

通过使用 自定义 parser 替代特定的 webpack loader，可以将任何 toml、yaml 或 json5 文件作为 JSON 模块导入。

1
npm install toml yamljs json5 --save-dev
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 const toml=require('toml')
const yaml=require('yamljs')
const json5=require('json5')
...
{
        test: /\.toml$/i,
        type: 'json',
        parser: {
          parse: toml.parse,
        },
      },
      {
        test: /\.yaml$/i,
        type: 'json',
        parser: {
          parse: yaml.parse,
        },
      },
      {
        test: /\.json5$/i,
        type: 'json',
        parser: {
          parse: json5.parse,
        },
      },

清理/dist文件

在每次构建前清理 /dist 文件夹，这样只会生成用到的文件。让我们使用 output.clean 配置项实现这个需求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Output Management',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
+    clean: true,
   },
 };