技術標籤：webpack-配置webpackjavascript

• 地址碼雲
• 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'
        ]
      })
    ]
  }