Webpack｜教學：Step3 建立專案前置作業

Webpack的安裝過程與套件新增在上篇結束了，這回將帶大家認識如何設定好Webpack來建立pug與sass的前置設定囉！

1.在終端機上輸入npm init產生package.json，而package.json的基本腳本如下：

{
  "name": "專案名稱",
  "version": "版本",
  "description": "專案描述",
  "main": "",
  "keywords": [
    "關鍵字",
    "關鍵字"
  ],
  "author": "專案作者",
  "license": "ISC"
}

2.開一頁新頁面命名為webpack.config.js，而基本設定如下：
＊這是由helpse所提供的webpack.config.js，是比較多人使用的設定檔

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var src = path.join(__dirname, 'src');
var config = {
  devServer: {
    hot: true,
    inline: true,
  },
  stats: {
    assets: false,
    colors: true,
    version: false,
    hash: true,
    timings: true,
    chunks: false,
    chunkModules: false
},
  entry: {
    styles: path.join(src, 'action.js'),
    index: path.join(src, 'index.pug'),
    bundle: path.join(src, 'index.js'),
},
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js'
    },
    module: {
      rules: [{
           test: /\.pug$/,
           use:  ['pug', 'html-loader', 'pug-loader']
        },
        {
           test: /\.sass$/,
           use: ['sass', 'css-loader', 'sass-loader', 'node-sass'],
        },
        {
           test: /\.css$/,
           use: ['style-loader', 'css-loader'],
        }
      ]
    },
    plugins: [
       new webpack.HotModuleReplacementPlugin(),
       new HtmlWebpackPlugin({
         title: 'index.html',
         template: path.join(src, 'index.pug'),
    }),
   ],
};
module.exports = config;

3.在專案資料夾中手動建立，2個檔案
1.build資料夾→index.html
2.app資料夾→main.jsx，檔案裡要寫入下列程式語法喔!

var AppComponent = require('./AppComponent.jsx');
console.log('Loaded the app component');

4.在終端機輸入npm run dev，沒有出現錯誤訊息的話webpack就建立完成囉！

希望大家都能順利執行你的webpack前置作業，一起投入node、npm大家族的懷抱吧！