webpack完整配置

这里简单学习了一下webpack的配置

首先是webpack.development.js

const path=require('path');
const StyleLintPlugin=require('stylelint-webpack-plugin');
const HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
  mode: 'development',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new StyleLintPlugin({
      files: ['**/*.css', '**/*.less', '**/*.html', '**/*.htm', '**/*.vue', '**/*.scss']
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../index.html')
    })
  ],
  devtool: 'source-map'
};

这里定义的是一些开发环境的的配置选项
主要是将文件输出并加载了一些插件

webpack.produce.js文件

const path=require('path');
const StyleLintPlugin=require('stylelint-webpack-plugin');
const HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
  mode: 'development',
  output: {
    path: path.resolve(__dirname, '../build'),
    filename: 'bundle.min.js'
  },
  plugins: [
    new StyleLintPlugin({
      files: ['**/*.css', '**/*.less', '**/*.html', '**/*.htm', '**/*.vue', '**/*.scss']
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../index.html')
    })
  ]
};

大致作用同上 这里是生产环境

webpack.test.js

const StyleLintPlugin=require('stylelint-webpack-plugin');

module.exports={
  mode: 'development',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new StyleLintPlugin({
      files: ['**/*.css', '**/*.less', '**/*.html', '**/*.htm', '**/*.vue', '**/*.scss']
    })
  ]
};

这里是测试环境

以下是package.json
很重要的文件 包含了一些快捷的启动方式
以及一些重要的插件版本 如果想要完整配置 以下的插件几乎必不可少

{
  "name": "8",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --env.development --open",
    "build": "webpack --env.production",
    "test": "jest-webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "autoprefixer": "^9.8.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^1.0.1",
    "eslint": "^5.16.0",
    "eslint-loader": "^2.2.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^23.6.0",
    "jest-webpack": "^0.5.1",
    "less": "^3.11.3",
    "less-loader": "^4.1.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "stylelint": "^9.10.1",
    "stylelint-config-standard": "^18.3.0",
    "stylelint-webpack-plugin": "^0.10.5",
    "url-loader": "^1.1.2",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "browserslist": [
    "> 0.5%",
    "last 1 version",
    "not dead"
  ],
  "stylelint": {
    "extends": "stylelint-config-standard"
  },
  "jest": {
    "roots": [
      "./tests/"
    ]
  },
  "directories": {
    "test": "tests"
  },
  "description": ""
}

webpack.config.js

const path=require('path');

const StyleLintPlugin=require('stylelint-webpack-plugin');

module.exports=function (env, argv){
  env=env||{};

  let conf=null;

  if(env.production){
    conf=require('./config/webpack.production');
  }else if(env.development){
    conf=require('./config/webpack.development');
  }else{
    conf=require('./config/webpack.test');
  }

  return {
    entry: './src/js/index',
    module: {
      rules: [
        //javascript
        {test: /\.(js|jsx)$/i, use: [{
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }, {
          loader: 'eslint-loader',
          options: {
            exclude: /node_modules|bower_modules/
          }
        }]},

        //css
        {test: /\.css$/i, use: ['style-loader', 'css-loader', {
          loader: 'postcss-loader',
          options: {
            plugins: [
              require('autoprefixer')
            ]
          }
        }]},

        //less
        {test: /\.less$/i, use: ['style-loader', 'css-loader', 'less-loader']},

        //images
        {test: /.(png|jpg|gif)$/i, use: {
          loader: 'url-loader',
          options: {
            outputPath: 'imgs/',
            limit: 4*1024
          }
        }},

        //fonts
        {test: /\.(eot|svg|ttf|woff|woff2)$/i, use: {
          loader: 'url-loader',
          options: {
            outputPath: 'fonts/',
            limit: 4*1024
          }
        }}
      ]
    },
    ...conf
  };
};

这里就是最具体加载插件的配置