最近學(xué)習(xí)使用node.js，于是使用express搭建了一個(gè)在線便利貼。

初始化

1. npm init -y 初始化文件
2. npm install express --save 安裝express
3. npm install express-generator 下載express應(yīng)用生成器
4. ./node_modules/express-generator/bin/express-cli.js . -f -e生成app應(yīng)用
5. npm install 安裝依賴包
6. npm start 打開http://locahost:3000/

安裝webpack

npm install webpack --save-dev
npm install webpack-cli --save-dev
同時(shí)在package.json中"scripts"中添加 
"dev": "webpack --mode development",
"build": "webpack --mode production",

由于每次啟動(dòng)webpack需要切換目錄，為了在根目錄下啟動(dòng)所以需要進(jìn)行設(shè)置，同時(shí)由于每次修改代碼后都需要從新編譯，這一步可以使用onchang代替，如下

npm install onchang --save-dev
同時(shí)在package.json中"scripts"中添加 
"webpack": "webpack --config=src/webpack.config.js",
用于在根目錄啟動(dòng)webpack
"watch": "onchange \"src/**/*js\" \"src/**/*.less\" -- npm run webpack"
用于檢測(cè)src目錄下所有的js與less文件的變動(dòng)，如果變動(dòng)，重新運(yùn)行npm run webpack

項(xiàng)目需要使用jQuery，在組件里如果路徑太長(zhǎng)，容易出錯(cuò)，因此可以配置webpack簡(jiǎn)化路徑,在webpack.config.js中添加如下代碼

resolve: {
        alias: {
            jq: path.join(__dirname, "js/lib/jq.js"),  //當(dāng)遇到j(luò)q時(shí)自動(dòng)映射到j(luò)q.js的文件上
            mod: path.join(__dirname, "js/mod"), // 將mod與js/mod映射
            less: path.join(__dirname, "less") //將less與less與less映射
        }

PS:由于之前移動(dòng)過(guò)webpack.config.js，因此需要注意他們的相對(duì)路徑

引入less，當(dāng)使用less時(shí)，需要多個(gè)工具對(duì)less處理成CSS并渲染到頁(yè)面上npm install less less-loader css-loader style-loader --save并對(duì)webpack.config.js進(jìn)行修改，增加如下代碼

module: {
        rules: [{
            test: /\.less$/,     // 識(shí)別less文件
            use: ["style-loader","css-loader", "less-loader",]
        }]
    }
PS:對(duì)less的處理從后到前即less-loader => css-loader => style-loader

備注
1.安裝webpack后還需要安裝cli,在webpack4后，兩者已經(jīng)分離
2.如果不添加"dev": "webpack --mode development","build": "webpack --mode production",運(yùn)行webpack會(huì)報(bào)錯(cuò)，添加后運(yùn)行npm run webpack 如圖這時(shí)需要在webpack.config.js里設(shè)置mode: 'development'

npm run webpack.png

npm run dev.png