Express搭建在線便利貼——Webpack配置

使用express應用生成器搭建項目

1. 使用一下命令安裝生成器

   $ npm install express-generator -g
   複製代碼

2. 使用-h 查看命令選項

   $ express -h
   
     Usage: express [options][dir]
   
     Options:
   
       -h, --help          output usage information
           --version       output the version number
       -e, --ejs           add ejs engine support
           --hbs           add handlebars engine support
           --pug           add pug engine support
       -H, --hogan         add hogan.js engine support
       -v, --view <engine> add view <engine> support (ejs|hbs|hjs|jade|pug|twig|			vash) (defaults to jade)
       -c, --css <engine>  add stylesheet <engine> support (less|stylus|compass|			sass) (defaults to plain css)
           --git           add .gitignore
       -f, --force         force on non-empty directory
   複製代碼

3. 建立名爲node-sticky的express應用程序

   $ express --pug --css=less node-sticky//我默認安裝了less和pug模板引擎
   複製代碼

4. 安裝依賴

   $ cd node-sticky
   $ npm install
   複製代碼

5. 啓動應用程序

   $ npm start
   
   > node-sticky@0.0.0 start /node-sticky
   > node ./bin/www
   複製代碼

6. 在瀏覽器輸入localhost:3000 就能夠看到歡迎畫面了。

7. 目前的目錄結構

   ├── app.js
   ├── bin
   │   └── www
   ├── package.json
   ├── public
   │   ├── images
   │   ├── javascripts
   │   └── stylesheets
   │       └── style.css
   ├── routes
   │   ├── index.js
   │   └── users.js
   └── views
       ├── error.pug
       ├── index.pug
       └── layout.pug
   複製代碼

添加src目錄，配置相應的webpack

1. 咱們把前端的源碼放在src目錄下，使用webpack打包到node的public目錄下面。添加以後的目錄結構爲：

   ├── app.js
   ├── bin
   |  └── www
   ├── package-lock.json
   ├── package.json
   ├── public
   |  ├── images
   |  ├── javascripts
   |  └── stylesheets
   |     └── style.less
   ├── routes
   |  ├── index.js
   |  └── users.js
   ├── src              			//前端源碼目錄
   |  ├── js
   |  |  ├── app        			//webpack入口目錄
   |  |  |  └── index.js
   |  |  ├── lib						//一些工具目錄
   |  |  |—— module             //js模塊
   |  ├── less							//less目錄
   |  └── webpack.config.js    //webpack配置文件
   └── views
      ├── error.pug
      ├── index.pug
      └── layout.pug
   複製代碼

   我使用的mac的tree命令生成目錄樹，具體命令：tree -l 4 --ignore=node_modules，把依賴目錄忽略。

2. 配置webpack

   1. 配置以前須要先安裝一下webpack依賴

      $ npm install webpack --save-dev
      複製代碼

   2. 而後簡單配置webpack入口文件和出口文件。

      let webpack = require('webpack')
      let path = require('path')
      
      module.exports = {
          entry: path.join(__dirname,'/js/app/index.js'),
          output: {
              path: path.join(__dirname,'../public'),
              filename: 'js/index.js'
          }
      }
      複製代碼

   3. 在終端運行webpack

      $ cd src
      $ webpack
      
      Hash: 80c9ec3163fbc2ca01c3
      複製代碼

   Version: webpack 4.3.0 Time: 265ms Built at: 2018-3-29 05:21:58 Asset Size Chunks Chunk Names js/index.js 676 bytes 0 [emitted] main Entrypoint main = js/index.js [0] ./js/module/b.js 36 bytes {0} [built] [1] ./js/module/a.js 36 bytes {0} [built] [2] ./js/app/index.js 65 bytes {0} [built]

   WARNING in configuration
    The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
    ~~~
   複製代碼

   4. 最後給一個警告，要加上webpack運行的環境，在後面加上就行了

      $ webpack --mode development
      複製代碼

配置package.json的script腳本

1. 可是咱們不能一直在src裏面執行，咱們要在根目錄下執行，全部要使用package.json裏面的srcipt字段腳本命令。須要配置webpack的--config指定腳本文件。

   //package.json
   {
     "name": "node-sticky",
     "version": "0.0.0",
     "private": true,
     "scripts": {
       "start": "node ./bin/www",
       "webpack": "webpack --config=src/webpack.config.js --mode=development"
     },
     "dependencies": {
       "cookie-parser": "~1.4.3",
       "debug": "~2.6.9",
       "express": "~4.16.0",
       "http-errors": "~1.6.2",
       "less-middleware": "~2.2.1",
       "morgan": "~1.9.0",
       "pug": "2.0.0-beta11",
       "webpack": "^4.3.0"
     }
   }
   複製代碼

2. 而後進入個目錄執行npm run webpack就會發現報錯了。

   $ cd ..
   $ npm run webpack                                                                                                            
   
   > node-sticky@0.0.0 webpack /Users/lanbo/projects/node-sticky
   > webpack --config=src/webpack.config.js
   
   The CLI moved into a separate package: webpack-cli.
   Please install 'webpack-cli' in addition to webpack itself to use the CLI.
   -> When using npm: npm install webpack-cli -D
   -> When using yarn: yarn add webpack-cli -D
   npm ERR! code ELIFECYCLE
   npm ERR! errno 1
   npm ERR! node-sticky@0.0.0 webpack: `webpack --config=src/webpack.config.js`
   npm ERR! Exit status 1
   npm ERR!
   npm ERR! Failed at the node-sticky@0.0.0 webpack script.
   npm ERR! This is probably not a problem with npm. There is likely additional 				logging output above.
   
   npm ERR! A complete log of this run can be found in:
   npm ERR!     /Users/lanbo/.npm/_logs/2018-03-28T21_33_04_687Z-debug.log
   複製代碼

3. 根據報錯內容須要安裝webpack-cli，那就照着作吧。

   $ npm install webpack-cli --save-dev
   複製代碼

4. 而後再次執行，就發現成功啦，哈哈哈~~而後問題來了，不能每次都要本身手動去webpack，有一個工具能自動去打包就行了，正好有這個工具--onchange.

   $ npm install onchange --save-dev
   複製代碼

5. 配置script腳本

   $ "watch": "onchange 'src/**/*.js' 'src/**/*.less' -- npm run webpack"
   複製代碼

6. 在另外開一個終端，啓動腳本就不去管他了，js和less文件有變更會自動去打包。

   $ npm run watch
   複製代碼

一點點記錄，一步步成長，加油~~~~