技術標籤：筆記

webpack 配置及使用技巧

First step:

• 三大件
  • webpack
  • webpack-cli
  • webpack-dev-server

Second step:

• 處理 JS -> ES6 ES7 ES8 裝飾器

  • 六件套

    • [email protected]

    • babel-core

    • babel-preset-env

    • babel-plugin-transform-runtime

    • babel-plugin-transform-decorators

    • babel-plugin-transform-decorators-legacy

Third step:

• 處理 sass -> css -> style

  • 四大件

    • sass-loader
    • node-sass
    • css-loader
    • style-loader

Fourth step:

• 處理模板 ejs-loader
  • ejs
  • tpl
• 處理 HTML
  • html-webpack-plugin

命令列：

• – save-dev：安裝在開發環境下的(- D)
• – sava：安裝在生產環境下的 ejs (- S)

安裝依賴包：

• npm i -D 包名

專案結構：

webpack.config.js ：

const htmlWebpackPlugin = require('html-webpack-plugin'
 
),
      path = require('path');
module.exports = {
  mode: 'development', // development production
  entry: {
    index: path.resolve(__dirname, './src/js/index.js')
  }, // 入口檔案
  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: 'js/[name].js'
  },
  module: {
    rules: [
      {
        test:
 
 /\.js$/,
        loader: 'babel-loader',
        exclude: path.resolve(__dirname, 'node_modules')
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.tpl$/,
        loader: 'ejs-loader'
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      // 打包後的 filename
      filename: 'index.html',
      // 打包誰呢？
      template: path.resolve(__dirname, './src/index.html'),
      chunks: ['index'],
      excludeChunks: ['node_modules']
    })
  ],
  devServer: {
    open: true,
    host: 'localhost',
    port: 3300
  }
  
}

package.json 檔案：需要修改scripts

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.config.js",
    "webpack": "webpack --config webpack.config.js"
  },

輸入 ：

npm run dev

專案就可以跑起來了。