基于sass/scss + typeScript + eslint多html页面webpack配置

工作中有一些单独页面开发，为了节省开发和打包时间，所以稍微研究了一下基于sass/scss + typeScript + eslint多html页面webpack配置。

项目包在这里。

初始化项目

通过初始化创建package.json文件。

npm init -y

安装webpack

npm i webpack webpack-cli -D

安装后在项目根目录创建webpack的配置文件webpack.config.js。文件配置内容会在后面做说明。

为了简化工作流程，可以安装clean-webpack-plugin，每一次打包都是全新的开始。

npm i clean-webpack-plugin -D

不停打包测试会浪费很多的时间，为了让每次修改都实时展现在页面上，我引入了webpack-dev-server插件。

npm i webpack-dev-server -D

安装eslint

本次采用的代码风格是prettier并且不使用其他js框架。所以需要安装插件如下：

npm i eslint prettier eslint-plugin-prettier -D

创建.eslintrc.js进行配置（具体配置内容，可根据个人需要进行调整）。

module.exports = {
   
  root: true,
  env: {
   
    browser: true,
    es6: true,
    node: true
    // jquery: true
  },
  parserOptions: {
   
    sourceType: 'module' // es6
  },
  extends: ['eslint:recommended'],
  plugins: ['prettier'],
  rules: {
   
    'prettier/prettier': [
      'error',
      {
   
        singleQuote: true, // 单引号

        trailingComma: 'none' // 最后一行的逗号
      }
    ]
  }
};

安装typeScript

npm i typescript ts-loader -D

创建tsconfig.json配置文件。更多的配置项可有参考官网配置项文档。

{
   
  "compilerOptions": {
   
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

安装sass/scss

为了提高开发效率，采用css预处理器，这里选用了scss。需要如下插件：

npm i css-loader node-sass sass-loader -D

给css增加前缀

为了提高代码兼容性，需要如下插件：

npm i postcss-loader autoprefixer -D

这样处理后的css会自动增加前缀。

分离css

通过import引入的css文件如果不单独分离出来，样式有可能会混乱。

基于webpack 4.0的项目，最好采用mini-css-extract-plugin和optimize-css-assets-webpack-plugin来分离css。

npm i mini-css-