阅读 1816

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.
     ~~~
    复制代码
    1. 最后给一个警告,要加上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
    复制代码

一点点记录,一步步成长,加油~~~~