archivos de fuentes de procesamiento de configuración de desarrollo webpack y archivos de estilo

• Nube de código de dirección
• config / webpack.base.js

  const path = require('path');
  
  module.exports = {
        
        
    entry: {
        
        
      index: './src/main.js'
    },
    module: {
        
        
      rules: [
        {
        
        
          test: /\.scss$/,
          use: [
            {
        
        
              loader: 'style-loader',
            },
            {
        
        
              loader: 'css-loader',
              options: {
        
         //保证@import引入其他样式文件的时候,重新走前面的postcss-loader
                importLoaders: 2
              }
            },
            {
        
        //为css样式添加厂商前缀
              loader: "postcss-loader"
            },
            {
        
        //将scss文件转换成css文件
              loader: 'sass-loader'
            }
          ],
        },
        {
        
        
          test: /\.css$/,
          use: [
            {
        
        
              loader: 'style-loader',
            },
            {
        
        
              loader: 'css-loader',
              options: {
        
         //保证@import引入其他样式文件的时候,重新走前面的postcss-loader
                importLoaders: 1
              }
            },
            {
        
        //为css样式添加厂商前缀
              loader: "postcss-loader"
            }
          ],
        },
        {
        
        
          test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
          use: [{
        
        
            loader: 'url-loader',
            options: {
        
        
              limit: 10 * 1024,//限制大小
              outputPath: 'fonts/',//复制出来的字体文件输出路径
              name: '[name].[hash:7].[ext]'//复制出来的字体图标的名称
            }
          }]
        }
      ]
    },
    output: {
        
        
      filename: '[name].js',
      path: path.resolve(__dirname, '../dist')
    }
  };
  

• config / webpack.dev.js

  const webpackBaseConfig=require('./webpack.base.js');
  const {
        
         CleanWebpackPlugin } = require('clean-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const {
        
         merge } = require('webpack-merge');
  
  const NODE_ENV=process.env.NODE_ENV;//获取package.json中配置的环境
  let plugins=[
    new HtmlWebpackPlugin({
        
        
      filename: 'index.html',
      template: './index.html',
      inject: true
    }),
  ];//定义一个plugins的空数组
  if(NODE_ENV=='production'){
        
        //如果是打包环境
    plugins.push(new CleanWebpackPlugin())
  }
  
  const webpackDevConfig={
        
        
    mode:'development',
    plugins:plugins
  };
  
  module.exports=merge(webpackBaseConfig,webpackDevConfig);
  

• config / webpack.prod.js

  const webpackBaseConfig = require('./webpack.base.js');
  const {
        
         CleanWebpackPlugin } = require('clean-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const {
        
         merge } = require('webpack-merge');
  
  const webpackProdConfig = {
        
        
    mode: 'production',
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        
        
        filename: 'index.html',
        template: './index.html',
        inject: true,
        minify: {
        
        
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
          // more options:
          // https://github.com/kangax/html-minifier#options-quick-reference
        },
      }),
    ]
  };
  
  module.exports = merge(webpackBaseConfig, webpackProdConfig);
  

• .gitignore

  .DS_Store
  node_modules/
  /common/
  npm-debug.log*
  yarn-debug.log*
  yarn-error.log*
  /dist/
  
  # Editor directories and files
  .idea
  .vscode
  *.suo
  *.ntvs*
  *.njsproj
  *.sln
  *.zip
  

• package.json

  {
        
        
    "name": "webpack-base-config",
    "version": "1.0.0",
    "description": "webpack基础配置",
    "main": "webpack.config.js",
    "scripts": {
        
        
      "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js",
      "build-dev": "cross-env NODE_ENV=production webpack --config ./config/webpack.dev.js"
    },
    "author": "Xavier",
    "license": "ISC",
    "devDependencies": {
        
        
      "autoprefixer": "^7.1.2",
      "clean-webpack-plugin": "^3.0.0",
      "cross-env": "^7.0.3",
      "css-loader": "^5.0.1",
      "file-loader": "^6.2.0",
      "html-webpack-plugin": "^4.5.0",
      "node-sass": "^5.0.0",
      "postcss-loader": "^4.1.0",
      "sass-loader": "^10.1.0",
      "style-loader": "^2.0.0",
      "url-loader": "^4.1.1",
      "webpack": "^4.44.1",
      "webpack-cli": "^3.3.12",
      "webpack-merge": "^5.7.2"
    }
  }
  

• postcss.config.js

  module.exports = {
        
        
    plugins: [
      require("autoprefixer")({
        
        
        browsers: [
          'ie >= 8',
          'Firefox >= 20',
          'Safari >= 5',
          'Android >= 4',
          'Ios >= 6',
          'last 4 version'
        ]
      })
    ]
  }