基本webpack啟動與設定

Posted on | In

webpack自動化開發工具
有很多新的加速開發前端技術，例如vue、stylus、sass… ,
但這些技術在沒有用特定工具轉換、編譯前，瀏覽器是看不懂的，
而這個工具就是 Webpack
webpack將這些語言轉換成瀏覽器看得懂的HTML、CSS、JavaScript
甚至可以用webpack來壓縮圖片
下列條列基本webpack啟動與設定…

Step1:

npm init

Step2:

npm install webpack webpack-cli –save -dev

Step3:

新增一個webpack.config.js

1
2
3
4
5
6
module.exports = {
    entry: './index.js', // 進入點
    output: {
     filename: 'index-bundle.js'
    }
}

用webpack開發網站的時候，所有東西都要用模組化來製作
包括 webpack 裡的config也要模組化

module.exports =>>> 我要將模組丟出去拉

Step4:

於package.json加入以下片段

1
2
3
"scripts": {
    “start”: “webpack"
}

Step5:

於終端機啟動 npm run start

  1. 新版的的webpack, 一定要透過npm scripts去執行webpack, 而非直接打webpack
  2. 執行webpack, 也做了轉換跟打包
  3. 沒有特別設定，會將檔案放置預設的dist資料夾
Q: 單純設定上述的時候，會發生以下錯誤，如何解決這個Warning?
WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

A1. [👎] 直接在config 加入 mode

1
2
3
4
module.exports = {
  mode: "production",
  ...
}

A2. [👍] 於package.json 調整script

1
2
3
4
5
6
7
...
"scripts": {
  "start": "webpack --mode development",
  "deploy": "webpack --mode production"
},

...