webpack4 一些常用配置

1、配置resolve extensions属性文件后缀处理

 resolve: {
        extensions: ['.js', '.json', '.vue', '.scss', '.css']
    },  

在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。 resolve.extensions 用于配置在尝试过程中用到的后缀列表，默认是：

extensions: ['.js', '.json']

也就是说当遇到 require('./test') 这样的导入语句时，Webpack 会先去寻找 ./test.js 文件，如果该文件不存在就去寻找 ./test.json 文件， 如果还是找不到就报错。

假如你想让 Webpack 优先使用目录下的 TypeScript 文件，可以这样配置：

extensions: ['.ts', '.js', '.json']

2、配置resolve alias全局变量

 resolve: {
        alias: {
            '@': path.join('src'),
            '@assets': path.join('src/assets'),
            '@static': path.join('static')
        }
    },  

项目结构如下：

结构.png

如果我在main.js里想引入base2.css，那么我们可以在mian.js里这样写

@import "@static/css/base2.css"

而不用找相对路径。

3、ProvidePlugin 自动加载模块，而不必到处 import 或 require 。

假如我们vue项目要使用：jQuery，那么怎么做呢?
我们先安装jQuery

cnpm i jQuery -S

在vue项目里我们必须先导入才能用，如下

import $ from "jquery"

如果页面很多都要用需要每个页面都导入，（或者提到入口文件，定义全局变量，但是也相对麻烦）

我们可以用webpack自带的ProvidePlugin

plugins: [
    //提供全局的变量，在模块中使用无需用require，import引入
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: 'jquery'
    }),
  ]

这样就可以了

$('#item'); // <= 起作用
jQuery('#item'); // <= 起作用
// $ 自动被设置为 "jquery" 输出的内容

4、DefinePlugin

definePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。如果在开发构建中，而不在发布构建中执行日志记录，则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处，设置它，就可以忘记开发和发布构建的规则。

项目情况：在开发环境想要请求接口www.baidu.com,生产环境想要请求接口www.google.com，那么怎么办呢？在之前我们自己判断是开发环境或者生产环境来设置请求接口，但是现在DefinePlugin就可以帮我们搞定。

在webpack.dev.conf.js（开发环境）

plugins: [
    new webpack.DefinePlugin({
     'url':'www.baidu.com'
    }),
  ]

在webpack.pro.conf.js（生产环境）

plugins: [
    new webpack.DefinePlugin({
     'url':'www.google.com'
    }),
  ]

这样我们就可以在项目里直接获取到url的值

console.log(url)//dev环境下打印出www.baidu.com
console.log(url)//pro环境下打印出www.google.com

5、DefinePlugin