webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。
通過vue-cli構建的webpack-vue專案
npm install --global vue-cli
vue init webpack my-project
複製程式碼專案結構
- build
build中是一些webpack的相關配置，包括基本配置、開發環境配置、生產環境配置等 - config
針對開發環境、生產環境、測試環境的配置資訊 - node-modules
package.json構建出的包 - src
- assets
會被webpack處理
- assets
- static
不會被webpack處理 webpack打包後，此目錄下的檔案會預設被複制到dist/static中，這是通過build.assetsPublicPath和buildSubDirectory來確定的 - .babelrc
用來配置babel - .editorconfig
在不同的編輯器和IDE之間定義和維護一致的程式碼風格 - .gitignore
git pull時候要忽略的檔案 - .postcssrc.js
配置postcss .vue-loader的postcss會預設讀取這個檔案 - index.html
入口檔案 - package-lock.json
制定了每個模組及其每個依賴項的版本位置和完整雜湊。所以無論是用什麼裝置（跨平臺）執行npm install 安裝的依賴都是相同的 - package.json
依賴 - README.MD
備註
build
webpack的相關配置，包括基本配置、開發環境配置、生產環境配置等【webpack.base.conf.js 】
一些概念
__dirname： 獲得當前執行檔案所在目錄的完整目錄名
__filename： 獲得當前執行檔案的帶有完整絕對路徑的檔名
process.cwd()：獲得當前執行node命令時候的資料夾目錄名
./： 檔案所在目錄
../： 檔案所在的上級目錄
/： 檔案所在的根目錄
複製程式碼path.dirname() 方法返回 path 的目錄名
path.dirname('/foo/bar/baz/asdf/quux');
// 返回: '/foo/bar/baz/asdf'
複製程式碼path.join([...paths])方法使用平臺特定的分隔符作為定界符將所有給定的 path 片段連線在一起，然後規範化生成的路徑。
path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');
// 返回: '/foo/bar/baz/asdf'
path.join('foo', {}, 'bar');
// 丟擲 'TypeError: Path must be a string. Received {}'
複製程式碼【webpack.base.conf.js】內容如下
const path = require('path'); //require是Node.js全域性函式
const ROOT = path.dirname(__dirname);
const SRC = path.join(ROOT, 'src');
const DIST = path.join(ROOT, 'dist');
module.exports = {
entry: { //入口起點(entry point)指示 webpack 應該使用哪個模組，來作為構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模組和庫是入口起點（直接和間接）依賴的。
index: path.join(SRC, 'index', 'js', 'index.js'),
payresult: path.join(SRC, 'payresult', 'js', 'index.js'),
paysuccess: path.join(SRC, 'paysuccess', 'js', 'index.js')
},
output: { //output 屬性告訴 webpack 在哪裡輸出它所建立的 bundles，以及如何命名這些檔案，預設值為 ./dist。基本上，整個應用程式結構，都會被編譯到你指定的輸出路徑的資料夾中。你可以通過在配置中指定一個 output 欄位，來配置這些處理過程：
filename: '[name].js',
path: path.join(DIST),
publicPath: '/',
},
//loader 讓 webpack 能夠去處理那些非 JavaScript 檔案（webpack 自身只理解 JavaScript）。loader 可以將所有型別的檔案轉換為 webpack 能夠處理的有效模組,本質上，webpack loader 將所有型別的檔案，轉換為應用程式的依賴圖（和最終的 bundle）可以直接引用的模組。
//在更高層面，在 webpack 的配置中 loader 有兩個目標：test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些檔案。use 屬性，表示進行轉換時，應該使用哪個 loader。例如{ test: /\.txt$/, use: 'raw-loader' }，當webpack編譯器碰到「在 require()/import 語句中被解析為 '.txt' 的路徑」時，對它打包之前，先使用 raw-loader 轉換一下。”
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'less': 'vue-style-loader!css-loader!postcss-loader!less-loader',
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/ //include 表示哪些目錄中的 .js 檔案需要進行 babel-loader;exclude 表示哪些目錄中的 .js 檔案不要進行 babel-loader
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: 'file-loader',
options: {
name: 'img/[name].[hash:7].[ext]'
}
},
{
test: /\.less$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "postcss-loader"
},
{
loader: "less-loader" // compiles Less to CSS
}
]
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(eot|woff|woff2|ttf)([\\?]?.*)$/,
loader: "file-loader"
},
]
},
resolve: {//解析模組的可選項
alias: { // 模組別名列表
'vue$': 'vue/dist/vue.esm.js',
}
},
};
複製程式碼config
const path = require('path');
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: '',
assetsPublicPath: './',
productionSourceMap: true,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://api.bilibili.com',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
},
'/payplatform': {
target: 'http://pay.bilibili.com',
// target:'http://10.23.144.52:8101',
changeOrigin: true,
pathRewrite: {
'^/payplatform': '/payplatform'
}
},
'/userAuth': {
target: 'http://pay.bilibili.com',
// target:'http://10.23.145.204:80',
changeOrigin: true,
pathRewrite: {
'^/userAuth': '/userAuth'
}
},
'/paywallet': {
target: 'http://pay.bilibili.com',
// target:'http://10.23.144.14:8081',
changeOrigin: true,
pathRewrite: {
'^/paywallet': '/paywallet'
}
}
}
}
};
複製程式碼.postcssrc.js
postcss是一個平臺，這個平臺可以開發一些外掛來處理css。例如autoprefixer:為css中的屬性新增瀏覽器特定的字首；module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {
browsers: ["Android 4.0", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 10"]
} //如果package.json有配置browserslist，autoprefixer會讀取package.json下的browserslist配置
}
}
複製程式碼package.json配置browserslist
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
複製程式碼.editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
複製程式碼