WebPack在项目设置中的探究(延续更新中)
webpack + gulp + vue (thinkPHP背景设置)
一、项目需求(请仔细看目次构造,项目构建许多数基于目次来的)
--- Application
|--- Home
| |--- View (线上用户接见的.html目次)
--- Public (线上资本文件目次)
|--- js
|--- images
|--- css
|--- ...
--- source (前端开辟目次)
|--- index (一个营业需求模块,每一个营业需求模块下会有许多页面)
| |--- index (index 页面)
| | |--- images
| | |--- index.html
| | |--- app.vue
| | |--- index.js
| | |--- style.scss
| | |--- ...
| |--- topics (topics 页面)
| | |--- images
| | |--- topics.html
| | | ...
|--- crowd (别的一个营业需求模块,每一个营业需求模块下会有许多页面)
| |--- index
| | |--- index.html
以上是我们的一个项目构造
1.我所想要的是每一个营业需求模块下(source/index)会有许多页面
每一个页面都是一个文件夹(source/index/index,source/index/topics)
2.项目无需背景环境浏览器能够直接翻开接见
3.每一个页面资本如.sass文件,.js文件等就近保护,用.vue + es6的情势举行组件模块化的开辟
4.开辟时具有优越的sourseMap调试
5.当我们不须要这个营业模块,或许某个页面的时刻能够直接删除悉数文件夹即可
webpack会协助我们会为每一个页面天生他本身的css文件,js文件.
由因而多页运用,在这我的html都是手动建立的(还没找到什么好的解决方法),所以我们直接在我们的index页面里link和script他们
<link rel="stylesheet" href="../../../Public/css/index/index.css">
<script src="../../../Public/js/index/index.js"></script>
当我们须要上线的时刻在用gulp把相对途径给替换成线上途径
二、webpack
module.exports = {
entry: {}, //路口
output: { }, //输出出口
module: {
loaders: [ ]
},
babel: { //设置babel
"presets": ["es2015"],
"plugins": ["transform-runtime"]
},
plugins: [ ],//编译的时刻所实行的插件数组
vue: { },//vue的设置,须要零丁出来设置
devtool : "source-map" //调试形式
};
这很简单就不过量引见,因为我们是多页运用,我们须要编写一个函数猎取一切路口js,天生一个我们想要的途径的对象.
三、entry
//须要用到glob模块
var glob = require('glob');
var getEntry = function () {
var entry = {};
//起首我们先读取我们的开辟目次
glob.sync('./source/**/*.js').forEach(function (name) {
var n = name.slice(name.lastIndexOf('source/') + 7, name.length - 3);
n = n.slice(0, n.lastIndexOf('/'));
//接着我对途径字符串举行了一些裁剪成想要的途径
entry[n] = name;
});
console.log(entry);
/**
* entry = {
* 'crowd/index' : './source/crowd/index/index.js',
* 'index/index' : './source/index/index/index.js'
* }
*
**/
//末了返回entry 给 webpack的entry
return entry;
};四、output
output: { //输出位置
path: path.resolve(__dirname, './public/'), //设置输出途径
filename: './js/[name].js' //文件输出情势
//关于filename 我们有个变量就是 [name] = entry的key 固然另有别的变量比方[id],[hash]等,人人能够自行发挥
//我们也能把filename写成 filename : [name]/[name].[name].js 也是能够的
},
五、loader
关于loader,其实有两种写法
{
test: /\.(png|jpg|gif)$/,
loader: 'url?limit=10000&name=./images/[name].[ext]?[hash:10]',
/*query: {
limit: 10000,
name: './images/[name].[ext]?[hash:8]'
}*/
},
//在这无论是直接loader 背面跟参数(像url跟参一样),或许是背面随着一个对象 query,都是能够的.
六、 plugins
这里我就只用到一个就是天生 自力的css文件,style嵌套在页面里的体式格局实在是丑得不可
七、 vue
这没啥好说的,vue更新以后须要零丁出来设置了
vue: { //vue的设置,须要零丁出来设置
loaders: {
js: 'babel'
}
}八、 NODE_ENV
以上都是我们的开辟设置,在临盆环境中,我们还须要增加一些东西
关于调试 在这里我也处理了异常久,假如开辟的时刻直接把vue的设置都写好,那在 页面是有题目的.所以我们得别的写一套vue,特地在临盆环境中运用
//因为我们的.vue文件模块化开辟,内里天然也有 css与sass,我们也须要设置末了导出css文件
var vueLoader = {
js: 'babel',
css: ExtractTextPlugin.extract("vue-style-loader", "css-loader"),
sass: ExtractTextPlugin.extract("vue-style-loader", "css-loader", 'sass-loader')
};
if (process.env.NODE_ENV === 'production') { //推断是不是为临盆环境
module.exports.vue.loaders = vueLoader;
//以下直接自创尤大大的了
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin()
]);
} else { //不是临盆环境则设置devtool 调试
module.exports.devtool = 'source-map';
}
九、 gulp
仅仅只要webpack部份照样没法满足我们的初志,所以我们须要gulp举行辅佐
webpack仅仅只会把我们js路口里的一切东西都处理了,然则我们的页面都是我们本身手动写的(还没想到更好的解决方案)
所以我们须要借助gulp的气力,把我们的.html移入我们想要的目次
然则如许的目次构造输出实际上是有题目的
--- source (前端开辟目次)
|--- index (一个营业需求模块,每一个营业需求模块下会有许多页面)
| |--- index (index 页面)
| | |--- images
| | |--- index.html
| | |--- app.vue
| | |--- index.js
| | |--- style.scss
| | |--- ...
| |--- topics (topics 页面)
| | |--- images
| | |--- topics.html
| | | ...
|--- crowd (别的一个营业需求模块,每一个营业需求模块下会有许多页面)
| |--- index
| | |--- index.html
//我们能够晓得gulp经由历程通配符 ./source/**/*.html 匹配到的文件 输入输出目次构造都是雷同的
//那我们就会取得以下毛病的输出构造
--- Application (毛病构造)
|--- Home
| |--- View (线上用户接见的.html目次)
| |--- index (一个营业需求模块)
| | |--- index (index 页面,过剩的目次)
| | | |--- index.html
| | |--- topics (topics页面,过剩的目次)
| | | |--- topics.html
| |--- crowd (crowd营业模块)
| | |--- index (crowd营业模块 index页面,过剩的目次)
| | | |--- index.html
//我们的营业模块文件应当包括一切的营业页面,而无需一个页面就是一个文件夹.
//所以以下才是准确的目次构造
--- Application (准确构造)
|--- Home
| |--- View (线上用户接见的.html目次)
| | |--- index (一个营业需求模块)
| | | |--- index.html
| | | |--- topics.html
| | |--- crowd (另一个营业需求模块)
| | | |--- index.html
本人想了异常多种体式格局都没方法完成,末了找到了唯一的方法(异常的愚昧的方法,假如您有更好的方法贫苦告诉我 T.T)
var map = require('map-stream');
var vfs = require('vinyl-fs');
gulp.task('view', function () {
var log = function(file, cb) {
//定义输出途径
var view = __dirname + '/Application/Home/View';
//又是一段切割历程 猎取我们想要的构造
var target = file.path.split('/').splice(-3);
var qqqq = target.splice(1, 1);
//设置我们的文件输出path
file.path = view + '/' + target.join('/');
cb(null, file);
};
vfs.src('./source/**/*.html')
.pipe(rev()) //这里您能够做一些pipe的操纵
.pipe(map(log))
.pipe(vfs.dest('./output')); //这里会多输出一次
gulp.start(['clean']); //我们须要实行一次clean 清理了过剩的那层目次
});
如许我们就可以取得我们想要的目次! 而且还能经由pipe对html文件的操纵! 最大的难点也就在这里
以上基本是我们一切的设置了,关于热加载,或许是browserSync等别的辅佐开辟东西,人人能够在这基本上自行拓展.
十、后话
年末,前端种种战役人人也都看见了.在如许一个前端需求极速增进,百花怒放,百花齐放的黄金时期.人人应当延续坚持进修的热忱
关注时期生长,张望技术生长,不自觉跟风,挑选最适合本身的,最相符现有项目的.
倘使一个东西没法为你们的项目带来更好的效力,给开辟带来更有益的生长.那你最好坚持张望,别顺从.
本人没有经历过grunt时期,然则自从进修前端自动化构建以来也是一起从 grunt -> gulp -> webpack 过渡的
在这时期完全能够相识他们之前的差别和差别,更多的应当进修头脑
你应当多诘责本身,为何这个东西当下会火呢?你应当不应当进修?
我非常不赞同那些拿来即用的同砚,说什么不久以后就死了,学也没什么用,浪费时间,我抄一个不就好了吗?
虽然我写得都很基本,但我照样愿望您别看我的文章.
假如能给您带来不错的进修体验,贫苦请右上角star : )
hava a nice day
