webpack的通用配置(1)-简单概念

主要分为5部分，分别是entry,output,loader,plugin和mode

1.entry

指的是文件的入口，有以下几种写法：

module.exports = {
  entry: 'app.js'
}

上面这种写法是

module.exports = {
  entry: {
    main: 'app.js'
  }
}

的简写
如果要引入多文件（也就是将应用app和第三方库分离）则可以使用多个文件入口的写法

module.exports = {
  entry: {
    main: 'app.js',
    vendor: './src/jquery.js'
  }
}

还有多页面应用程序

module.exports  = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

2.output

指的是通过入口文件生成的出口文件，即使文件有多个入口，但是出口文件的配置只有一个。
出口文件主要有以下几个属性

module.exports = {
  output:{
    filename: 'index.js', // 输出文件名称，可以为指定的入口名字，也可以在出口文件中添加hash字符串，例如[name].js,[name].[hash].js;
    path: './dist', // 输出文件的路径，这里输出的结果为index.js文件生成到该文件的dist文件夹下
  }
}

3.mode

指的是当前webpack的打包环境，主要分为开发环境development和生产环境production。在vue-cli中的开发环境和生产环境主要有以下几个区别：
1.开发环境下有devServer而生产环境中并没有。
2.开发环境下的代码不是可压缩状态，而生产环境的代码为压缩状态；
3.开发环境下的sourceMap的最佳值为cheap-module-eval-source-map而生产环境下的sourceMap一般为false或者是source-map即看不到转换过的代码。
4.开发环境下css有模块化功能，而在生产环境中一般都是把css直接引用到js文件中。
5.开发环境下有模块热替换功能，而在生产环境中并没有该功能。

4.loader

loader主要是对源代码进行转换。loader可以让你使用import或者加载模块时预处理文件。通常使用loader是在module对象下的rules中进行相应的loader的引用，例如

module.export = {
  module:{
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(svg|png|jpg|gif)$/,
        loader: 'file-loader',
        options:{
          limit: 8196
        }
        
      },
      {
        test: /\.js$/,
        exclude: '/(node_modules|bower_components)/',
        loader: 'babel-loader'
      }
    ]
  }
}

下面介绍几种常用的loader

1.babel-loader

babel-loader主要是针对使用兼容性比较差的语法，比如在es6中使用es6语法。这种情况下如果不通过babel-loader的话会在低版本ie浏览器中出现不兼容的情况，这种情况下就得通过babel-loader解决该情况。
因为babel-loader即使在生产环境中也是需要用到的，所以使用npm安装的时候是通过

npm install --save babel-loader @babel/core @babel/preset-env webpack

完成webpack4中babel-loader的安装。
如果是低版本的webpack,比如说vue-cli2中的webpack，默认为3.x版本，这种情况下安装上面的命令行的话就会出现报错。这个时候就应该输入以下命令行

npm install babel-loader babel-core babel-preset-env webpack

在webpack配置对象中，需要添加babel-loader到配置对象中，需要进行下图的配置

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

也可以将options配置对象中的内容通过.babelrc文件提取出来进行相应的配置。

2.css-loader

顾名思义，css-loader是将css文件通过import或者require引入后进行解析，然后就能成功的引用相应的css文件。通常和style-loader连用。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

3.file-loader

主要将import或者require引入的文件生成一个具有哈希值的文件并保留原始后缀名。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[hash].[ext]', // 文件生成名称
              outputPath: './image', // 文件生成路径,一般生成在output的path的文件夹下
              publicPath: '/assets', // 打包后设置对静态资源引用的位置
            }
          }
        ]
      }
    ]
  }
}

4.style-loader

当样式以<style></style>的形式加载css内容时，这个时候就会使用到style-loader,所以一般情况下css文件引入需要style-loader和css-loader进行联用。
配置如下图

{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }
}

5.url-loader

与file-loader类似，当文件大小低于所设置的limit的时候，文件则以DataUrl的形式展示出来。
通用配置如下

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 限制文件大小
              mimetype: '[extname]' // 指定文件类型
              fallback: 'file-loader' // 如果文件大小超过limit限制后，引用file-loader
            }
          }
        ]
      }
    ]
  }
}

file-loader和url-loader的区别？
1、url-loader依赖file-loader
2、当使用url-loader加载图片，图片大小小于上限值，则将图片转base64字符串，；否则使用file-loader加载图片，都是为了提高浏览器加载图片速度。
3、使用url-loader加载图片比file-loader更优秀,所以一般情况下引入文件都是用url-loader而不是用file-loader