最近学习使用node.js，于是使用express搭建了一个在线便利贴。

初始化

1. npm init -y 初始化文件
2. npm install express --save 安装express
3. npm install express-generator 下载express应用生成器
4. ./node_modules/express-generator/bin/express-cli.js . -f -e生成app应用
5. npm install 安装依赖包
6. npm start 打开http://locahost:3000/

安装webpack

npm install webpack --save-dev
npm install webpack-cli --save-dev
同时在package.json中"scripts"中添加 
"dev": "webpack --mode development",
"build": "webpack --mode production",

由于每次启动webpack需要切换目录，为了在根目录下启动所以需要进行设置，同时由于每次修改代码后都需要从新编译，这一步可以使用onchang代替，如下

npm install onchang --save-dev
同时在package.json中"scripts"中添加 
"webpack": "webpack --config=src/webpack.config.js",
用于在根目录启动webpack
"watch": "onchange \"src/**/*js\" \"src/**/*.less\" -- npm run webpack"
用于检测src目录下所有的js与less文件的变动，如果变动，重新运行npm run webpack

项目需要使用jQuery，在组件里如果路径太长，容易出错，因此可以配置webpack简化路径,在webpack.config.js中添加如下代码

resolve: {
        alias: {
            jq: path.join(__dirname, "js/lib/jq.js"),  //当遇到jq时自动映射到jq.js的文件上
            mod: path.join(__dirname, "js/mod"), // 将mod与js/mod映射
            less: path.join(__dirname, "less") //将less与less与less映射
        }

PS:由于之前移动过webpack.config.js，因此需要注意他们的相对路径

引入less，当使用less时，需要多个工具对less处理成CSS并渲染到页面上npm install less less-loader css-loader style-loader --save并对webpack.config.js进行修改，增加如下代码

module: {
        rules: [{
            test: /\.less$/,     // 识别less文件
            use: ["style-loader","css-loader", "less-loader",]
        }]
    }
PS:对less的处理从后到前即less-loader => css-loader => style-loader

备注
1.安装webpack后还需要安装cli,在webpack4后，两者已经分离
2.如果不添加"dev": "webpack --mode development","build": "webpack --mode production",运行webpack会报错，添加后运行npm run webpack 如图这时需要在webpack.config.js里设置mode: 'development'

npm run webpack.png

npm run dev.png