使用webpack打包vue工程
生活随笔
收集整理的這篇文章主要介紹了
使用webpack打包vue工程
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?
記得去年十月份的時候，自己在研究webpack，當(dāng)時只是知道大致的用法，寫了一個簡單的demo，現(xiàn)在，經(jīng)過了7個月對公司產(chǎn)品架構(gòu)的使用，以及對vue-cli的使用，在了解了實際應(yīng)用中各種需求之后，我自己寫了一套適合開發(fā)的vue-cli
為了滿足業(yè)務(wù)需要我這里配置了四套環(huán)境，打包的時候可以自己根據(jù)不同的業(yè)務(wù)場景進行打包
首先看整體目錄結(jié)構(gòu)：
?
package.json里是各種依賴，build是四套webpack要讀取的config，static是要復(fù)制到dist下的配置文件，四套環(huán)境的api都保存在這里。
index.html是一個單頁程序的模版，也會打包到dist里，并且會把打包后的js，css，動態(tài)加載到index.html里
代碼如下
package.json
{"name": "vue-demo","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack --config build/webpack.dev.config.js|webpack-dev-server --config build/webpack.dev.config.js --color --progress","build": "webpack --config build/webpack.dev.config.js","build-dev": "webpack --config build/webpack.dev.config.js","build-test": "webpack --config build/webpack.test.config.js","build-yufa": "webpack --config build/webpack.yufa.config.js","build-online": "webpack --config build/webpack.online.config.js"},"author": "","license": "ISC","description": "","dependencies": {"babel-core": "^6.23.1","babel-loader": "^6.4.0","babel-plugin-transform-runtime": "^6.23.0","babel-preset-es2015": "^6.22.0","babel-runtime": "^5.8.38","css-loader": "^0.26.4","extract-text-webpack-plugin": "^3.0.2","file-loader": "^1.1.11","html-loader": "^0.5.5","style-loader": "^0.21.0","url-loader": "^1.0.1","vue-hot-reload-api": "^2.0.11","vue-html-loader": "^1.2.4","vue-loader": "^11.1.4","vue-router": "^3.0.1","vue-style-loader": "^2.0.3","webpack": "^3.11.0","webpack-dev-server": "^2.4.1"},"devDependencies": {"clean-webpack-plugin": "^0.1.19","copy-webpack-plugin": "^4.5.1","html-webpack-plugin": "^3.2.0","vue": "^2.5.16","vuex": "^3.0.1"} }webpack.dev.config.js
let path = require("path");//路徑包 const HtmlWebpackPlugin = require('html-webpack-plugin');//打包html模版到dist文件夾下面 let ExtractTextPlugin = require('extract-text-webpack-plugin'); //將css文件單獨打包 const CleanWebpackPlugin = require('clean-webpack-plugin');//每次打包之前會清除掉之前的包 let webpack=require("webpack");//打包 let CopyWebpackPlugin=require("copy-webpack-plugin")//拷貝配置文件到打包文件夾下 module.exports = {devtool: '#eval-source-map',//本地開發(fā)的時候可以快速定位到相關(guān)的位置 entry: {bundle: './src/main.js',vendor: ['vue', 'vuex']},output: {path: path.resolve(__dirname, '../dist'),filename:'js/[name][chunkhash].js',// hashDigestLength: 8 // 默認(rèn)長度是20 },plugins: [new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: true}),//打包html模版用的webpack插件，html-webpack-pluginnew ExtractTextPlugin({filename: 'css/[name][chunkhash].css', //路徑以及命名}),//打包css文件new CleanWebpackPlugin(['./*'],{root: path.resolve(__dirname, '../dist'),verbose: true,dry: false}),//在打包前，刪掉dist下面的文件new webpack.optimize.CommonsChunkPlugin({name: 'manifest',chunks: ['bundle']}),//分離出業(yè)務(wù)代碼和第三方代碼，分別打包，vendor 代表第三方的插件new webpack.optimize.CommonsChunkPlugin({name: 'manifest',chunks: ['vendor']}),//分離出業(yè)務(wù)代碼和第三方代碼，分別打包，bundle 代表業(yè)務(wù)組件new CopyWebpackPlugin([{from: __dirname + '/../static/config',to:__dirname + '/../dist/config'}])],devServer: {contentBase: path.join(__dirname, "dist"), //網(wǎng)站的根目錄為 根目錄/dist，如果配置不對，會報Cannot GET /錯誤port: 9000, //端口改為9000open:true // 自動打開瀏覽器，適合懶人 },resolve: {alias: {'vue$': 'vue/dist/vue.common.js','@': path.resolve('src')},},module: {rules: [{test: /\.css$/,use: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader"}),include: [path.resolve(__dirname, "../src"),],exclude: /node_modules/},{ test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,loader: "url-loader?limit=1&name=images/[name].[ext]",include: [path.resolve(__dirname, "../src"),],exclude: /node_modules/},// {// test: /\.lhtml$/, // loader: path.resolve(__dirname, "../loaders/lhtml.js"),// }, {test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/},{test: /\.html$/,loader: 'html-loader',exclude: /node_modules/},{test: /\.vue$/,loader: 'vue-loader',include: [path.resolve(__dirname, "../src"),],exclude: /node_modules/}]} }dist文件夾
index.html模版
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Webpack App</title></head><body><div id="app"></div><script type="text/javascript" src='./config/index.js'></script></body> </html>index.html打包后
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Webpack App</title><link href="css/bundlea98c13aa08e803c80c32.css" rel="stylesheet"></head><body><div id="app"></div><script type="text/javascript" src='./config/index.js'></script><script type="text/javascript" src="js/manifestec61393171da3bb83c2f.js"></script><script type="text/javascript" src="js/bundlea98c13aa08e803c80c32.js"></script><script type="text/javascript" src="js/vendorf1a0697505d33ae0d2ec.js"></script></body> </html>config/index.js
var urlconfig={api:"http://dev.windseek.com", }?
我的博客即將搬運同步至騰訊云+社區(qū)，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=14hortl96o1yt
?
轉(zhuǎn)載于:https://www.cnblogs.com/windseek/p/webpack-vue.html
總結(jié)
以上是生活随笔為你收集整理的使用webpack打包vue工程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： OkapiBarcode生成条形码
- 下一篇： Python学习笔记__1.5章 循环