一個用webpack4打包的vue 的項目，參照vue-cli的webpack配置，
公司主營業(yè)務(wù)：做網(wǎng)站、成都網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出新樂免費做網(wǎng)站回饋大家。
一步一步帶你實現(xiàn)一個vue的打包的項目，每一個commit對應(yīng)一個步驟。
github 地址
clone project
git clone git@github.com:naihe138/nvue.git
install
npm install or yarn
一、初始化項目
初始化項目，用vue-loader來打包.vue文件，html-webpack-plugin插件來導(dǎo)出html文件。
第一步我們很簡單，就利用vue-loader 和 babel-loader 是把.vue文件打包出來，總共才40多行代碼，看build/webpack.base.conf.js文件注釋就看的懂。+++表示有省略的代碼
重慶分公司
重慶分公司
module.exports = {
+++
// 模塊，loader
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: /node_modules/,
include: resolve('src')
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
include: resolve('src')
}
]
}
+++
}
運行 webpack --config build/webpack.base.conf.js
二、打包css和圖片等資源
這里打包css以sass 為例，用到了mini-css-extract-plugin插件提取css，用url-loader來處理字體、圖片、音頻等資源。非常簡單。如下代碼，+++表示有省略的代碼
+++
module.exports = {
+++
// 模塊，loader
module: {
rules: [
+++
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{
test: /.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/img/[name].[hash:7].[ext]'
}
}
+++
]
},
// 插件
plugins: [
+++
new MiniCssExtractPlugin({
filename: 'static/css/[name].[hash].css',
chunkFilename: 'static/css/[name].[hash].css'
})
]
}
運行 webpack --config build/webpack.base.conf.js
三、配置熱加載、代理等開發(fā)環(huán)境
通過build/config.js來設(shè)置開發(fā)配置。如下注釋
const path = require('path')
module.exports = {
dev: {
assetsSubDirectory: 'static', // 靜態(tài)文件目錄
assetsPublicPath: '/', // 相對文件路徑
proxyTable: {},
host: 'localhost',
port: '8000',
autoOpenBrowser: false, // 是否自動打開瀏覽器
errorOverlay: true, // 瀏覽器錯誤提示遮罩層
notifyOnErrors: true, // 編譯錯誤的時候通知提示，需要friendly-errors-webpack-plugin 配合
poll: false,
useEslint: true, // 便宜使用eslint-loader模塊
showEslintErrorsInOverlay: false, // eslint瀏覽器錯誤提示遮罩層
devtool: 'cheap-module-eval-source-map', // Source Maps
cssSourceMap: true, // css Source Maps
cacheBusting: false, // vue debugg 提示
}
}
在webpack.dev.conf.js中，通過webpack-dev-server 插件來開啟熱重載服務(wù)，同時配置自動補全css兼容代碼的插件，postcss-loader
運行npm run dev 或者 yarn dev 就可以啟動服務(wù)了
四、配置打包環(huán)境
通過build/config.js來設(shè)置開發(fā)配置。如下注釋
const path = require('path')
module.exports = {
+++
build: {
// html模板
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// 生產(chǎn)環(huán)境的souce map
productionSourceMap: false,
devtool: '#source-map',
// 開啟靜態(tài)文件的Gzip壓縮
// 如果是true 的話 需要 npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// 打包完成顯示包大小的狀態(tài)分析
// `npm run build --report`
bundleAnalyzerReport: process.env.npm_config_report
}
}
運行npm run build 或者 yarn build 就可以實現(xiàn)打包vue項目啦。
五、檢查版本，優(yōu)化打包輸出和Eslint設(shè)置
在check-version.js中用 shelljs 模塊檢查時候有npm命令， semver模塊語義化版本號，然后在build.js合并webpack.prod.conf.js的的配置，然后組在格式化輸出。
// 檢查時候有安裝npm命令
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
// 格式化輸出
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')通過eslint-loader 來配置eslint的檢查，建立.eslintrc.js去設(shè)置規(guī)則
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src')],
exclude: /node_modules/,
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
},
六、打包優(yōu)化
1、添加DllPlugin和DllReferencePlugin來打包優(yōu)化不變的庫，
2、通過cache-loader來做loader的緩存，
3、通過UglifyJsPlugin的parallel來開啟多線程打包
先運行npm run dll 然后 npm run build
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
