webpack初體驗

因開發的web程式愈來愈複雜，webpack是當用來建構web程式的管理工具，基本的使用方法介紹如下:

一、安裝webpack
至https://nodejs.org下載node.js

二、創立web模組化開發專案
1.新建一目錄
2.執行npm init

三、安裝webpack至開發專案
npm i -D webpack
或npm install –save-dev webpack webpack-cli
–save-dev同-D，指的是將安裝模組保存到package.json的devDependencies
另若要指定版本請用npm install –save-dev webpack@
要安裝最新的體驗版請用npm install –save-dev webpack@beta
要將webpack安裝至全域未來都可使用請用npm i -g webpack，
但建議不要安裝至全域以利未來不同專案可用不同版本

1.webpack.config.js

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

module.exports = {
    devtool: 'cheap-eval-source-map',
    entry: [
      'webpack-dev-server/client?http://localhost:8080',
      'webpack/hot/dev-server',
      './src/main.js'
    ],
    output: {
        filename: 'main.bundle.js',
        path: path.resolve(__dirname, './dist'),
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new HtmlWebpackPlugin({
        template: './dist/index.html'
      })
    ],
    module: {
    },
    devServer: {
      contentBase: './dist',
      hot: true
    }
}

2.main.js

import helplers from './helpler.js';
helplers.showlog('webpack 初始化');

3.helper.js

export default {
    showlog(msg) {
        console.log('您輸入的資料: ' + msg);
    }
}

4.package.json

{
  "name": "webpack01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev"  : "webpack-dev-server --config webpack.config.js"
  },
  "author": "",
  "license": "ISC"
}

5.build webpack
指令 npm run build

五、安裝開發Server:
1.https://neighborhood999.github.io/webpack-tutorial-gitbook/Part1/WebpackDevServer.html
2.執行chrome debug: npm run dev

六、範例下載
https://github.com/yahuihuang/webpack01