最近學(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 打開(kāi)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
如果運(yùn)行npm run dev會(huì)報(bào)錯(cuò)叫搁，這個(gè)問(wèn)題還沒(méi)找到解決方法
npm run dev.png
