cnpm（node package manager）和webpack模塊
npm是運行在node.js環境下的包管理工具（先安裝node.js，再通過命令
npm install npm -g
安裝npm），使用npm可以很快速的安裝前端文件里需要依賴的那些項目文件，比如js、css文件等。首先需要通過npm命令在根目錄創建一個packg.json配置文件，這個文件定義了你的項目所需要的各種模塊，以及項目的名稱、版本、許可證等元數據、以json格式配置項目所需的運行和開發環境。cnpm是npm的淘寶鏡像，cnpm的指令與npm是完全一樣的，把npm改為cnpm即可。
安裝packg.json配置文件
安裝webpack
webpack的作用有兩個
1.可以可以將js、css等文件模塊打包，會自動分析你的項目結構，找到這些模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏
覽器使用。比如js文件並不能引用其他js文件，除非使用ES6的語法import，這種語法現在很多瀏覽器並不支持，webpack可以對其轉換打包成一個可以被瀏覽器解析的文件。
2.一個html頁面上的link、javascript和img等標簽總是會默認發起ajax請求向服務器索要html依賴的各種程序文件和圖片、字體圖標，這會造成頁面加載速度不夠理想。使用webpack后，由webpack統一管理這些耗時的每次請求，你不需要在每個html頁面上引入那些繁多的程序文件、圖片和字體圖標，只需要引入同一個文件（裝載了js、css等的引用）就可以解決所有引入的問題，這節約了頁面加載的耗時。
3.打開命令行工具，無論是在何處打開命令行工具的，你只需要輸入安裝webpack的命令即可把webpack安裝到全局（C:\Users\Andminster\AppData\Roaming\npm目錄下）
cnpm i webpack-cli -g //全局安裝表示安裝到C:\Users\Andminster\AppData\Roaming\npm\node_modules目錄下
cnpm i webpack -g
//卸載全局的webpack
cnpm uninstall -g webpack //可以用@指定版本號 ,如：cnpm uninstall -g webpack@3
package.json
在你的項目根目錄創建package.json文件。這個文件里就是你的項目所需要的各種模塊，它配置項目的開發環境。.json的文件里不能寫注釋，不能使用單引號。
"name": "vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC",
//簡稱dep，在運行環境下會用到的配置
"dependencies": {
"jquery": "^3.4.1", //運行程序依賴於jquery，所以下載jquery時使用的是cnpm i jquery -S，S就是保存到運行環境
"webpack-cli": "^3.3.2"
},
//簡稱dev，在生產環境下要用到的配置
"devDependencies": {
"webpack": "^4.31.0", //webpack等打包工具只是用來打包的時候用 ，運行發生在打包之后，所以打包工具放在生產環境里
"webpack-dev-server": "^3.3.1"
}
}
指令的四種模式
cnpm i xxxmodule - D 安裝到本地目錄后注冊到package.json的devDependencies（dev）生產環境中，生產環境的程序是用來編譯打包的
cnpm i xxxmodule - S 安裝到本地目錄后注冊到package.json的dependencies(dep)運行環境中，運行環境是用來支持運行時的程序的
cnpm i xxxmodule -g global（全局安裝），安裝到C:\Users\Andminster\AppData\Roaming\npm，而不是安裝到你的項目目錄
webpack打包指令
webpack .\src\main.js .\dist\bundle.js
新版命令：webpack .\src\main.js -o .\dist\bundle.js
webpack手動打包
在vscode中，創建如下目錄和文件
打開終端輸入cnpm指令
1.cnpm init -y 安裝packge.json
2.cnpm i webpack-cli -g 安裝全局的webpack CLI
3.cnpm i webpack -g 安裝全局的webpack
4.接下來在main.js中輸入一段測試代碼，打開瀏覽器測試效果
$(function() {
alert("hello");
});
//使用webpack打包main.js
webpack .\src\main.js .\dist\bundle.js，如果你用的最新版本：webpack .\src\main.js -o .\dist\bundle.js
//在index.html中直接引入bundle.js即可
<script src="../dist/bundle.js"></script>
webpack.config.js
如不喜歡每次轉換都提供入口和出口文件路徑，可以考慮在項目根目錄創建一個webpack.config.js文件，將入口和出口路徑配置在該文件中。這樣，下次打包時只需要輸入webpack即可。
module.exports={
//webpack打包的入口文件
entry:path.join(__dirname,"/src/main.js"),
//webpack打包的出口文件
output:{
path:path.join(__dirname,"/dist"),
filename:"bundle.js"
}
}
webpack-dev-server模塊（自動打包）
在熟悉了webpack安裝及其使用方式后，現在你可以完全忽略以上的打包方法。以下介紹的方法是終極絕招，請把上面的方法忘掉，自動打包方法可以自動監視你對程序的修改且可以將改動即時反應在瀏覽器上。也即，你不需要手動寫轉換打包的指令，連webpack指令也不需要寫。具體操作如下
1.cnpm init -y 安裝packge.json
2.cnpm i webpack-cli -g 安裝全局的webpack CLI
3.cnpm i webpack -g 安裝全局的webpack
4.cnpm i webpack-cli -D 安裝本地（當前項目）的webpack CLI到生產環境
5.cnpm i webpack -D 安裝本地（當前項目）的webpack到生產環境
6. cnpm i webpack-dev-server -D 安裝本地的webpack-dev-server到生產環境
7.在package.json文件中的scripts屬性中添加一條
"name": "vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.4.1",
"webpack-cli": "^3.3.2"
},
"devDependencies": {
"webpack": "^4.31.0",
"webpack-dev-server": "^3.3.1"
}
}
8.在當前項目的根目錄創建webpack.config.js，添加以下代碼
module.exports={
//webpack打包的入口文件
entry:path.join(__dirname,"./src/main.js"),
//webpack打包的出口文件
output:{
path:path.join(__dirname,"./dist"),
filename:"bundle.js"
}
}
9.在index.html中引入還未打包的bundle.js，這個文件經過webpack-dev-server自動處理后會生成到內存中，而不再是dist目錄
10.執行cnpm run dev（終止cnpm run dev：在命令窗口按ctrl+c），輸出以下信息
在瀏覽器輸入http://localhost:8080打開網站點擊src目錄下的index.html文件查看效果。現在你對項目的js文件改動后，webpack-dev-server會立即作出響應並反映在瀏覽器上。
托管站點根目錄
有兩種方式可以托管站點根目錄，第一種是通過在package.json的scripts中為dev指定參數來設置托管的根目錄，被托管的目錄會被當做站點根目錄：
第二種方式是通過在webpack.config.js的devServer中指定參數來設置托管的根目錄，被托管的目錄會被當做站點根目錄
module.exports={
//webpack打包的入口文件
entry:path.join(__dirname,"./src/main.js"),
//webpack打包的出口文件
output:{
path:path.join(__dirname,"./dist"),
filename:"bundle.js"
},
devServer:{
open:true,
hot:true,
port:3000,
contentBase:"src" //托管的站點根目錄設為src而不再是項目根目錄（本例中項目根目錄是vue，src在vue下面）
}
}
引用node_module目錄下的程序包
不管你托管的目錄是vue（本頁面例子中的根目錄）還是托管的vue下面的src目錄，在引用通過cnpm指令安裝的程序包（jquery、bootstrap等文件）時，jquery、bootstrap本身是在node-module目錄，如果你的站點根目錄是src，也不用擔心無法引入與src同級別的node-module目錄下的文件。也即不管托管哪個目錄，都是使用以下方式引入node-module目錄下的包，都會去node-module去找，不用手動寫/node-module/bootstrap……
import "bootstrap/dist/css/bootstrap.css" //node-module目錄的文件固定這樣引用
css打包
webpack默認值支持js文件的打包，要打包css需要安裝專門處理css的loader模塊
1.cnpm i style-loader -D 本地安裝style-loader模塊
2.cnpm i css-loader -D 本地安裝css-loader模塊
3.在webpack.config.js中注冊模塊
module.exports={
//webpack打包的入口文件
entry:path.join(__dirname,"./src/main.js"),
//webpack打包的出口文件
output:{
path:path.join(__dirname,"./dist"),
filename:"bundle.js"
},
devServer:{
open:true,
hot:true,
port:3000,
contentBase:"src"
},
//配置第三方模塊的加載器
module:{
rules:[
{test: /\.css$/,use:['style-loader','css-loader'] } //以css結尾的文件用這倆模塊進行處理
}
}
4.在src目錄創建css目錄，在css目錄創建index.css
font-size:150px;
color:red;
font-weight:bold;
}
5.在src目錄的main.js文件中添加以下引入css文件的代碼
import "./css/index.css" //其中./表示當前目錄，不能直接寫css/index.css，否則報錯
$(function() {
alert("webpack");
});
6.在src目錄的index.html中添加如下代碼
最后運行cnpm run dev看效果
處理css文件中的url
background: url('/img/1.PNG') ;
height:200px;
}
webpack不能處理url地址，這些url地址指向了圖片、字體等。這需要安裝url-loader來處理，而url-loader又依賴於file-loader
1.cnpm i file-loader -D
2.cnpm i url-loader -D
3. 注意你的webpack托管的是哪一個目錄，現在假設你的圖片路徑為：vue/src/img/1.png。那么如果你的托管的根目錄是你的項目根目錄vue，則你在css文件中的url為：/src/img/1.png。如果你把src設為站點根目錄，比如你把在webpack.config.js文件中的devServer屬性的contentBase設src為托管目錄，而你的項目根目錄本來是vue，那么你在css文件中設置的url為：img/1.png
在webpack.config.js注冊url-loader
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.(png | jpg | gif | ttf | jpeg)$/, use: 'url-loader' }
]
}
url-loader默認不會把圖片生成為base64的編碼，但base64編碼有利於網絡傳輸，一般情況下應該將小圖片轉換為base64，大圖不適用。可通過配置module的rules來實現自動識別小圖並轉換
處理字體圖標
比如bootstrap、阿里的iconfont等就有很多字體圖標，需要設置過濾規則，用url-loader進行處理
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
打包less
與css是一樣的設置方式，先在src-css目錄創建index.less文件
p{
font-size:50px;
background: "#000";
color:red;
}
}
在main.js引入less
在webpack.config.js注冊less-loader
module:{
rules:[
{test: /\.css$/,use:['style-loader','css-loader'] },
{test: /\.less$/,use:['style-loader','css-loader','less-loader']} //以less結尾的文件用這兩模塊進行處理
]
}
cnpm i less -D 本地安裝less，less-loader模塊依賴於less模塊
cnpm i less-loader -D 本地安裝less-loader模塊
打包sass
第一種方法
npm i -global -production windows-build-tools
cnpm i node-sass -D
cnpm i sass-loader -D
其中node-gyp和production windows-build-tools需要用管理員身份運行powershell，由於這兩個工具包都是全局安裝，所以隨便在哪個位置打開powershell都可以，使用npm安裝這兩個工具，安裝完成后，再shift加右鍵項目目錄打開powershell安裝node-sass和sass-loader。如果之前沒有安裝gyp和windows構建工具導致失敗，一定要先卸載sass相關包，再按本方法重新安裝。
第二種方法（沒試過，不確定可行與否）
npm sass-loader -d
配置第三方模塊的加載器
rules:[
{test: /\.scss$/,use:['style-loader','css-loader','sass-loader']}
]
}
全局引入scss（vue-cil + webpack適用）
如果你不希望在.vue組件文件中導入scss（因為每一個組件文件可能都需要用到某個全局的scss文件，這樣導入會降低效率，而且組件文件也有深度層級，這樣每個組件文件都導入某個全局的scss文件就得琢磨路徑問題，超麻煩。但如果你不把某個全局的scss文件導入到當前.vue組件文件中，則無法使用全局scss文件中的變量）。這個問題靠安裝sass-resources-loader來解決。注意以下各種支持sass的包需要同時保存到生產環境和運行環境
cnpm i sass-loader -S -D
cnpm i style-loader -S -D
打開build/webpack.base.conf.js，添加scss處理程序（loader）
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
},
打開build/utils.js，找到scss一行
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
替換為
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders( 'sass' ).concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve( __dirname, '../src/assets/css/global.scss' )
}
}
),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
resources指定了你的全局scss的路徑：css/global.scss，你需要在../src/assets目錄中創建一個css目錄，在css目錄創建一個global.scss文件作為全局scss文件
然后在global.scss中定義一個變量
現在你可以在任何一個.vue組件文件中的style標簽里加入lang="scss"，接着就可以使用全局變量了。
打包js文件
webpack只支持一些不算太高級的ES6語法，要完整支持ES6高級語法，需要安裝babel-loader，有babel-loader是一個js高級語法編譯器，它處理之后會自動交給webpack打包到bundle.js
1.cnpm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D
2.cnpm i babel-preset-env babel-preset-stage-0 -D
注：babel-loader必須是7.1.5，其它版本裝了報錯。
在webpack.config.js注冊babel-loader
rules: [
{ test: /\.js$/, use: 'babel-loader',exclude:/node_modules/ } //exclude設置被babel-loader編譯所排除的目錄，如果這個目錄被轉換，耗時很長而且不能成功運行
]
}
在項目根目錄（與package.json同級）創建一個.babelrc的json文件（注：文件名起始處帶.號，不帶json后綴名）用於注冊babel-loader所使用的插件和語法
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}
在main.js中寫測試代碼
static personCount=100;
}
alert(Person.personCount);
import時的路徑提示工具
安裝擴展工具：Path Intellisense后，在設置種打開json配置輸入以下紅色部分的代碼
"editor.renderLineHighlight": "gutter",
"editor.mouseWheelZoom": true,
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
}
}
在項目根目錄下創建jsconfig.json，該文件與package.json同級
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": [
"node_modules"
]
}
安裝vue-cil
vue-cil自帶完整的目錄結構，先裝package.json、再裝webpack-cil、webpack，最后安裝vue-cil
1.npm install --global vue-cli
2.安裝好后，在C:\Users\Andminster\AppData\Roaming\npm下的node_modules目錄下會看到vue-cil
3.創建一個目錄，shift右鍵該目錄打開命令行工具，輸入：vue init webpack 你准備創建的項目名稱（不能有大寫字母），接下來會彈出一些提示如圖所示，一路回車或yes or no之后，vue-cil會自動為你在你創建的目錄下面創建一個完整的vue項目目錄。
如果是在visual studio中使用vue項目，由於vue-cil已經完整創建了項目結構，所以只需要在vs中：文件-打開-網站，選擇你的項目目錄即可把項目載入到vs中
自動打開網站
打開package.json文件，為webpack-dev-server增加：--open --hot。
運行
一切就緒之后，關掉命令行工具，再shift右擊項目目錄（是vue-cil自動創建的，不是你手動創建的目錄）運行npm run dev，因為安裝vue-cil是在項目目錄的上級目錄開始的，此時不退出你運行vue項目，會提示找不到文件。
cannot get
如果打開網站后提示cannot get，可能是沒有安裝sass處理包，sass安裝參考：全局引入scss（vue-cil + webpack適用）
webpack.base.conf.js
此文件就是配置處理各種文件的loader的地方。 默認情況下不需要改動。
關閉瀏覽器控制台eslint對錯誤的提示
打開config目錄下的index.js，將useEslint設為false
vue.config.js
這個文件位於與package.json相同的目錄，默認沒有創建，你可以自行創建，它會在終端運行 vue-cli-service 時，先找到vue.config.js，獲取到你的相關配置，才繼續執行其它操作，具體配置結構如下，可直接復制粘貼到vue.config.js中。
// 部署應用包時的基本 URL
publicPath: process.env.NODE_ENV === 'production'
? '//your_url'
: '/',
// 運行 vue-cli-service build 時生成的生產環境構建文件的目錄
// 默認構建前清除文件夾(構建時傳入 --no-clean 可關閉該行為
outputDir: 'dist',
// 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄
assetsDir: 'static',
// 指定生成的 index.html 的輸出路徑 (相對於 outputDir),也可以是一個絕對路徑
indexPath: 'index.html',
// 生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存
filenameHashing: true,
// 當在 multi-page 模式下構建時，webpack 配置會包含不一樣的插件
// (這時會存在多個 html-webpack-plugin 和 preload-webpack-plugin 的實例)。
// 如果你試圖修改這些插件的選項，請確認運行 vue inspect
pages: {
index: {
// page 的入口
entry: 'src/pages/index/index.js',
// 模板來源
template: 'src/pages/index/index.html',
// 在 dist 的輸出為 index.html
filename: 'index.html',
// 當使用 title 選項時，
// template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: '首頁',
// 在這個頁面中包含的塊，默認情況下會包含
// 提取出來的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 當使用只有入口的字符串格式時，
// 模板會被推導為 `public/subpage.html`
// 並且如果找不到的話，就回退到 `public/index.html`。
// 輸出文件名會被推導為 `subpage.html`。
// 多入口時，接着寫子頁面
//subpage: 'src/subpage/main.js'
},
// eslint-loader 是否在保存的時候檢查
lintOnSave: true,
// 是否使用包含運行時編譯器的Vue核心的構建
runtimeCompiler: false,
// 默認情況下 babel-loader 忽略其中的所有文件 node_modules，
// 想要通過 Babel 顯式轉譯一個依賴，可以在這個選項中列出來
transpileDependencies: [],
// 生產環境 sourceMap
productionSourceMap: false,
// 跨域設置
// 可取值參考： https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes
crossorigin: undefined,
// 構建后的文件是部署在 CDN 上的，啟用該選項可以提供額外的安全性, 默認false
integrity: false,
// webpack 配置，鍵值對象時會合並配置，為方法時會改寫配置
// https://cli.vuejs.org/guide/webpack.html#simple-configuration
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
},
//configureWebpack: (config) => {},
// webpack 鏈接 API，用於生成和修改 webapck 配置
// https://github.com/mozilla-neutrino/webpack-chain
chainWebpack: ( config ) => {
// 因為是多頁面，所以取消 chunks，每個頁面只對應一個單獨的 JS / CSS
config.optimization
.splitChunks( {
cacheGroups: {}
} );
// 'src/lib' 目錄下為外部庫文件，不參與 eslint 檢測
config.module
.rule( 'eslint' )
.exclude
.add( '/Users/maybexia/Downloads/FE/community_built-in/src/lib' )
.end()
},
// 配置高於chainWebpack中關於 css loader 的配置
css: {
// false 時只有 *.module.[ext] 結尾的文件才會被視作 CSS Modules 模塊
// true 時可以去掉文件名中的 .module， 並將所有的 *.(css|scss|sass|less|styl(us)?) 文件視為 CSS Modules 模塊
modules: false,
// 是否使用 css 分離插件 ExtractTextPlugin，采用獨立樣式文件載入，不采用 <style> 方式內聯至 html 文件中
// 生產環境下是 true，開發環境下是 false
extract: true,
// 是否構建樣式地圖，設置為 true 之后可能會影響構建的性能
sourceMap: false,
// css預設器配置項
loaderOptions: {
css: {
// 這里的選項會傳遞給 css-loader
},
postcss: {
// 這里的選項會傳遞給 postcss-loader
}
}
},
// 所有 webpack-dev-server 的選項都支持
// https://webpack.js.org/configuration/dev-server/
devServer: {
open: true,
host: '127.0.0.1',
port: 3000,
https: false,
hotOnly: false,
// 將任何未知請求 (沒有匹配到靜態文件的請求) 代理到該字段指向的地方
proxy: null,
before: app => {
}
},
// 構建時開啟多進程處理 babel 編譯
// 是否為 Babel 或 TypeScript 使用 thread-loader
parallel: require( 'os' ).cpus().length > 1,
// https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// 第三方插件配置
pluginOptions: {}
};
關於vue-cil其它參考：Vue2全家桶之一：vue-cli（vue腳手架）超詳細教程
常用指令
ctrl + c //終止控制台程序的執行
cnpm info 包名//查看遠程包的版本號
vue 包名 -V //查看本地包版本號
cnpm uninstall 包名 //卸載包
其它
*處理工具xxx-loder在webpack1.0版本不需要后綴loader
* 如果項目運行失敗的錯誤是端口號問題，可能是端口號被占用，關閉vscode重新打開或打開windows資源管理器，結束進程即可