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
