外链引入css有哪些方式_前端项目正确的配置方式！

随着前端技术体系逐渐成熟，前端开发人员的必备技能已经不仅仅局限于简单的页面的编写，而是有越来越多工程化的事情需要我们去考虑。怎么才能让一个项目的开发变的顺畅，不需要考虑太多的浏览器兼容的问题？如何降低代码的冗余，减少生产环境代码的体积？如何提升用户使用产品时的体验？等等这些问题都是需要我们去考虑的。本文就以上问题，梳理出一个常规的webpack配置文件，简化你的学习成本，提高生产效率。

我们先从代码的兼容说起~这里我们不得不提到babel

什么是Babel？

Babel是一套主要用来将使用ECMAScript2015+语法编写的代码转换成纯ES5的Javascript代码的工具，以兼容任何老式浏览器与运行环境。

Babel可以做什么？

Babel可以用来编译ES6+的语法，它使所有ES6+规范新增的语法糖都可用，包括：类(class)，箭头函数(arrow function)，模板字符串等等。

我们在webpack中如何使用babel呢？

首先创建一个.babelrc文件，配置如下

{
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "targets": {
        "edge": "17",
        "firefox": "60",
        "chrome": "67",
        "safari": "11.1",
        },
        "corejs": "3",
        "useBuiltIns": "usage"
      }
    ]
  ]
}

preset-env是一个预设的集合，因为我们很难知道，我们编写的业务代码到底需要引入哪些转换的插件，preset-env会根据我们的配置需要，去帮我们做插件的引用

useBuiltIns：usage

这个配置很关键，有很多ES5+的新语法，浏览器普遍还没有进行支持，所以需要借助一些polyfill来帮助我们去实现这些新语法的特性，如果我们不设置useBuiltins这个属性的话，babel会根据targets的配置，加载一些指定浏览器所不具备的功能函数，但是其中有很多函数其实我们并没有用到，usage这个属性只会加载我们代码中用到的新语法，这样可以让polyfill按需加载，大幅度的降低打包后文件的体积。

然后在webpack.config.js文件中添加

  module: {
    rules: [{
        test: /.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/, // 不匹配选项
      },
    ]
  },

通过上面的babel配置，我们就能愉快的使用各种版本的新语法，而不需要担心浏览器兼容的问题。

实现了代码转换后，我们要怎么注入到html文件中去呢？总不能每次对js文件进行打包后，手动通过script标签的方式，引入到html文件中吧，这样一个文件还能配置的过来，分包后多个文件怎么办？

htmlWebpackPlugin

new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './src/tepmlate/index.html'), 
      title: 'name',
      file: 'index.html',
      inject: true
    }),

通过这个插件，我们