- 全局安裝
* npm install webpack
* npm install babel
* 全局創(chuàng)建.babelrc
* copy 內(nèi)容2（package.json）執(zhí)行 npm install 局部安裝所需控件
- package.json內(nèi)容如下，
{
"name": "longhu",
"version": "1.0.0",
"main": "gulpFile.js",
"dependencies": {
"acorn": "^5.1.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"element-ui": "^1.0.0",
"graceful-fs": "^4.1.11",
"gulp": "^3.9.1",
"less": "^2.7.2",
"source-list-map": "^2.0.0",
"source-map": "^0.5.6",
"tapable": "^0.2.6",
"vue": "^2.1.6",
"webpack": "^3.2.0"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-vue-app": "^1.2.0",
"bower": "^1.8.0",
"css-loader": "^0.28.4",
"file-loader": "^0.8.5",
"imagemin-webpack-plugin": "^1.5.0-beta.0",
"less-loader": "^4.0.5",
"style-loader": "^0.18.2",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.0.0",
"vue-template-compiler": "^2.3.4",
"webpack": "^3.1.0",
"webpack-dev-server": "^2.5.1"
},
"scripts": {
"build": "webpack --display-error-details -w&",
"dev": "webpack-dev-server --inline --hot --open --content-base&"
},
"author": "",
"license": "ISC",
"description": ""
}
- webpack.config.js配置如下
/**
* Created by mazhenxiao on 2016/12/19.
*/
var webpack = require("webpack");
var path = require("path");
var jspath = "./content/js/es6/";
var jsdist = "./content/dist/js/";
var css = "../css/";
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); //thunk
var compress = require("webpack/lib/optimize/UglifyJsPlugin"); //壓縮
var DedupePlugin = require("webpack/lib/optimize/DedupePlugin"); //多文件
var ImageminPlugin = require('imagemin-webpack-plugin').default;//圖片壓縮
//const opn = require('opn');
console.log(path.join(__dirname,jspath, "index.js"));
module.exports = {
entry: {
"index": path.join(__dirname,jspath, "index.js")
},
output: {
path: path.join(__dirname,jsdist),
publicPath:'./content/dist/js/',
chunkFilename: 'chunk-[name].js',
filename: '[name]-ES6.js'
},
module: {
loaders: [
{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader',exclude: /node_modules/ },
{ test: /\.css$/, loader: 'style-loader!css-loader!less-loader',exclude: /node_modules/ },
{ test: /\.vue$/, loader: 'vue-loader',exclude: /node_modules/ },
{
test: /\.js$/, //path.join(__dirname, jspath),
loader: 'babel-loader',
query: {
presets: ['es2015']
},
exclude: /node_modules/
}
]
},
plugins: [
new CommonsChunkPlugin({
name: "chunk"
}),
/* new compress({ //壓縮放到上線時再打開
output: {
comments: false, // remove all comments
},
compress: {
warnings: false
}
}), */
new DedupePlugin({
'process.env': {NODE_ENV: '"production"'}
}),
new ImageminPlugin({
disable: process.env.NODE_ENV !== 'production', // Disable during development
pngquant: {
quality: '95-100'
}
})
]
}
- .babelrc 文件配置
{
"presets": [ "es2015"], //解析es6為es6
// "plugins": ["syntax-dynamic-import"] //異步數(shù)據(jù)加載chunk分割文件，但是異步加載不太好用果斷注釋
}
- 路由
路由部分有一個坑
ie不支持require.ensure,提示消息爆粗口：“Promise不存在”，
按官網(wǎng)提示添加新插件syntax-dynamic-import谁尸，但是不好使树姨，真正好用的方法如下（血淚史請留意）
* npm install babel-polyfill
* 在路由頁面導入 import "babel-polyfill";
/**
* 頁面路由功能獲取右側(cè)內(nèi)容，最后名稱為頁面生成chunk切割文件名稱
*/
/* import home from "../view/Home.vue"; */
import "babel-polyfill"; //兼容ie
Vue.use(VueRouter);
let Home =callback=>require.ensure([],require=>callback(require('../view/Home.vue').default),"home");
//const Indexs = require("../view/index.vue");
//let Home = () => import(/* webpackChunkName: "Home" */ '../view/Home.vue')
const routes = [
{
name:"index",path:"/",component:Home
}]
const router = new VueRouter({
routes // （縮寫）相當于 routes: routes
})
window["router"] = router;
export default router;
- 頁面綁定
import router from "./route.js";
let main = new Vue({
router
}).$mount("#contentView")
