webpack学习成长之路

现在的SPA开发中,在使用Angular、React和Vue进行开发的时候,一般在新建项目的时候,会直接使用官方提供的脚手架进行新项目的创建!虽然官方给我们提供了使我们可以快速构建项目的脚手架,但是在某些时候是需要我们手都去修改配置的,所以学习webpack是必然的!本文主要用于记载webpack学习总结!

1. webpack的作用

在知道webpack的作用之前,我们需要明白的是webpack是什么,简单的讲,webpack就是一个现代的Javascript静态模块打包工具!

2. weppack在的配置

在配置webpack的时候,这里的文件名,默认使用webpack.config.js!

const path = require('path');
// 打包之后生成一个index.html,将js自动引入
const HtmlWebpackPlugin =  require('html-webpack-plugin');
// 将css打包成单独的文件,并且自动进入到html
const  MiniCssExtractPlugin =  require('mini-css-extract-plugin');
module.export ={
  // 入口,应用程序开始执行,可以配置多个入口
  entry:{
      test1: './src/index.js',
      test2: './src/login.js'
  },
  // 出口,可以配置多个出口
  output:{
      // 打包文件夹的名字和打包后文件的位置
      path: path.resolve(process.cwd(), "package"),
      // 打包完成后的js文件名,当是多个入口的时候,这里可以使用name属性,hash是给文件名添加hash值,hash后面的冒号跟的数值,是打包之后保留的哈希值得位数,这里有一个
      // 问题就是打包之后的test1.js和test2.js他们后面跟的hash值是一样的并且未改变的js文件也重新打包了,也许这个时候,只需要打包修改了的,
      // 这个时候就可以使用chunkHash,它会只打包修改过的js并且使得两个包的名字不一样,但是这样做也会有一个问题,只要对应的js或者css改变,其对应的hash的值也会改变,
      // 若是这个时候内容没有变化,就没有达到缓存的意义, 还有一种hash是contentHash,contentHash是针对内容的,只有模块的内容发生改变,hash值才会发生变化
      // 这个name属性前的js指的是文件夹的名字,打包后的js会在js文件夹下
      filename:'js/[name].[chunkHash:6].js'
  },
  plugins: [ 
    // 打包之后会在生成一个index.html文件,并且自动引入最新的打包js文件 
    // title 是打包之后可以动态传入的HTML的title,template的值是文件的的路径
    // 但是这样做会有一个问题就是打包后的css不是一个单独的css文件,如果我们希望打包后,css在一个单独的文件中,那么我们可以使用miniCssExtractPlugin.loader
    // 这里的name前的css是文件夹的名字,打包后的css文件会在css文件夹下
    new HtmlWebpackPlugin({
        title: 'textPack',
        template: 'text/index.js'
    }),
    new MiniCssExtractPlugin({
        filename: 'css/[name].[chunkHash:8].css'
    })
    ],
    // 解析任意类型文件
    module: {
        rules:[
            // 规则可以配置多个
            {
                // 当文件后缀以.css结尾的时候,就使用css-loader解析,这里loader的执行顺序是后写的先执行,css-loader是解析,style-loader 引入
                test:/\.css$/,
                use: [
                        MiniCssExtractPlugin.loader, 
                        'css-loader', // 解析css
                        'postcss-loader' // 自动加前缀---需要再创建一个postcss.config.js进行配置
                    ]
            }, 
            {   
                // 当文件名的后缀是.less结尾的时候,就使用less-loader解析,执行顺序同上
                test:/\.less$/,
                use: [
                       MiniCssExtractPlugin.loader,
                       'css-loader',
                       'postcss-loader', //自动加前缀 --- 需要再创建一个postcss-loader.config.css进行配置
                       {
                           loader: 'less-loader',
                           options: {

                           }
                       }
                ]

            },
            {
                // 文件资源,后缀名是.jpg.png.gif 
                test:/\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader', // 这里也可以使用url-loader
                        options: {
                            name: '[name].[ext]', // 文件名字
                            outputPath:'images', // 打包后图片所在的文件
                            publicPath: '/images' // 上面文件前加的路径
                        }
                    },
                ]

            },
            {
                // 处理以.js为后缀的文件,主要就是做兼容,将js代码转化为es5规范
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/, // 不处理这些文件夹下的文件
                use: [
                    {
                        loader: 'babel-loader',
                        option: {
                            presets: ['@babel/preset-env']
                        }
                    }
                ]
            }
        ]
    },
    // 安装插件webpack-dev-server
    devServer:{
        // 项目启动的端口号
        port: 3000,
        // 自动打开浏览器
        open: true,
    },
    // browserslist ---- 自动加前缀兼容不同版本的浏览器
}

3. 总结

• 1.在需要配置解析某些文件的时候,在rule中配置
• 2.跟打包之后文件有关系的配置在plugins中配置
• 3.跟程序的入口有关系的就在export 中配置
• 4.跟程序的出口有关系的output中配置
• 5.这里使用的语法是nodejs的语法
  明白以上的配置,在日常的开发中,也就问题不大了,学海无涯,下次再有用到其他的,就在记录进来!