webpack 共用文件抽离?
resource.js
"use strict";
//base
import Vue from 'vue';
import VueResource from 'vue-resource';
import store from '../store/index.js';
//use
Vue.use(VueResource);
const supportWebp = (function () {
try {
return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
} catch (err) {
return false;
}
})();
function setUrl(url) {
let _prefix = location.origin + '/uci-pre/unionpay/';
if (/^https?/.test(url)) {
//绝对地址
return url;
} else {
//非生产的请求地址
if (!/content.95516.com/.test(location.host)) {
_prefix = 'http://122.32.33.61:8080/uci-pre/unionpay/';
}
return _prefix + url + '.json';
}
}
function setLocation() {
var _location=store.state.location;
return {
latitude: _location.latitude,//维度
longitude: _location.longitude,//经度
..._location.cup
}
}
export default {
ajax(params){
console.log(params);
if (params.type == 'get') {
} else {
}
},
post(params){
console.log(setLocation());
const _url = setUrl(params.url);
const _data = JSON.stringify({webp: supportWebp, ...params.data});
console.log(_data);
Vue.http.post(_url, _data).then((response)=> {
console.log(response);
if(10000==response.body.code){
params.callback && params.callback(response, 100, 'ok');
}else{
params.callback && params.callback(response, 0, JSON.stringify(response));
}
}, (err)=> {
console.log(err);
params.callback && params.callback(err, 0, JSON.stringify(err));
})
},
get(params){
console.log(params);
}
}
webpack.base.js
"use strict";
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const CONFIG = require('./config');
var projectRoot = CONFIG.projectRoot || path.resolve(__dirname, '../');
var _ENV = CONFIG.env || 'dev';//prod
module.exports = {
devtool: _ENV != 'prod' ? '#eval-source-map' : false,
context: __dirname,//http://wxungang.github.io/1104/vue
entry: {
app: path.join(projectRoot, './vue/app.js'),
page: path.join(projectRoot, './vue/page.js')
},
output: {
path: path.join(projectRoot, './build/vue-' + _ENV),
publicPath: '',//'./build/vue-'+_ENV+'/',//path.join(__dirname, '../src/build/dev/')
filename: '[name].js',
chunkFilename: 'chunks/[name].chunk.js',
// crossOriginLoading: 'anonymous'
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js',
'vue-router$': 'vue-router/dist/vue-router.common.js'
},
modules: ["node_modules"],
mainFiles: ["index", "app"],
extensions: [".js", ".json", '.vue']
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this nessessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
'less': 'vue-style-loader!css-loader!less-loader'
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.html$/,
loader: 'vue-html-loader'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
plugins: [
//注入一些全局变量
new webpack.DefinePlugin({
_ENV_: _ENV,
_VERSION_: JSON.stringify("1.0.0")
}),
new webpack.optimize.CommonsChunkPlugin({
name: "commons",
// (the commons chunk name)
filename: "vueCommons.js",
// (the filename of the commons chunk)
// minChunks: 3,
// (Modules must be shared between 3 entries)
// chunks: ["pageA", "pageB"],
// (Only use these entries)
children: true,
// async: true,
}),
//可以和entry文件联合配置
new HtmlWebpackPlugin({
inject: false,
title: 'vueJs of app',
filename: 'app.html',
template: '../vue/entry/template.ejs',
scripts: ['./vueCommons.js', './app.js']
}),
new HtmlWebpackPlugin({
inject: false,
title: 'vueJs of page',
filename: 'page.html',
template: '../vue/entry/template.ejs',
scripts: ['./vueCommons.js', './page.js']
})
]
};
问题:
(目前发现所有用到ajax函数的页面都含有resource.js代码和vue-resource.js)
1、怎样抽离vue-resource.js?[外部共用插件]
2、怎样抽离resource.js?[项目内部封装的工具函数]
3、怎样抽离公共样式文件?[共用的样式组件库和页面样式代码]
4、vue.js抽离在哪个文件了?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
使用 CommonsChunkPlugin,具体用法见 CommonsChunkPlugin 的文档
options.minChunks (number|Infinity|function(module, count) -> boolean): The minimum number of chunks which need to contain a module before it's moved into the commons chunk. The number must be greater than or equal 2 and lower than or equal to the number of chunks. Passing Infinity just creates the commons chunk, but moves no modules into it. By providing a function you can add custom logic. (Defaults to the number of chunks)
看得懂吗?看不懂就算了,我没有义务牺牲自己的时间来替你省学英语的时间!