WebPack在多页应用项目中的探索

时间 2019-12-20

标签 webpack 多页应用项目探索繁體版

原文原文链接

WebPack在项目配置中的探索(持续更新中)

webpack + gulp + vue (thinkPHP后台配置)javascript

1、项目需求(请认真看目录结构,项目构建很大都基于目录来的)

--- 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

以上是咱们的一个项目结构css

1.我所想要的是每个业务需求模块下(source/index)会有不少页面html

每个页面都是一个文件夹(source/index/index,source/index/topics)前端

2.项目无需后台环境浏览器能够直接打开访问vue

3.每一个页面资源如.sass文件,.js文件等就近维护,用.vue + es6的形式进行组件模块化的开发java

4.开发时拥有良好的sourseMap调试webpack

5.当咱们不须要这个业务模块,或者某个页面的时候能够直接删除整个文件夹便可git

webpack会帮助咱们会为每个页面生成他本身的css文件,js文件. es6

因为是多页应用,在这个人html都是手动建立的(还没找到什么好的解决办法),因此咱们直接在咱们的index页面里link和script他们github

<link rel="stylesheet" href="../../../Public/css/index/index.css">
    <script src="../../../Public/js/index/index.js"></script>

当咱们须要上线的时候在用gulp把相对路径给替换成线上路径

2、webpack

module.exports = {
    entry: {}, //路口
    output: { }, //输出出口
    module: {
        loaders: [ ]
    },
    babel: { //配置babel
        "presets": ["es2015"],
        "plugins": ["transform-runtime"]
    },
    plugins: [ ],//编译的时候所执行的插件数组
    vue: { },//vue的配置,须要单独出来配置
    devtool : "source-map" //调试模式
};

这很简单就不过多介绍,因为咱们是多页应用,咱们须要编写一个函数获取全部路口js,生成一个咱们想要的路径的对象.

3、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; 
};

4、output

output: { //输出位置
    path: path.resolve(__dirname, './public/'), //配置输出路径
    filename: './js/[name].js' //文件输出形式
    //关于filename 咱们有个变量就是 [name] = entry的key  固然还有别的变量好比[id],[hash]等,你们能够自行发挥
    //咱们也能把filename写成  filename : [name]/[name].[name].js 也是能够的
},

5、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,都是能够的.

6、 plugins

这里我就只用到一个就是生成独立的css文件,style嵌套在页面里的方式实在是丑得不行

7、 vue

这没啥好说的,vue更新以后须要单独出来配置了

vue: { //vue的配置,须要单独出来配置
    loaders: {
        js: 'babel'
    }
}

8、 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';
}

9、 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等别的辅助开发工具,你们能够在这基础上自行拓展.

10、后话

年终,前端各类战争你们也都看见了.在这样一个前端需求极速增加,百家争鸣,百花齐放的黄金时代.你们应该持续保持学习的热情

关注时代发展,观望技术发展,不盲目跟风,选择最适合本身的,最符合现有项目的.

假若一个工具无法为大家的项目带来更好的效率,给开发带来更有益的发展.那你最好保持观望,别盲从.

本人没有经历过grunt时代,可是自从学习前端自动化构建以来也是一路从 grunt -> gulp -> webpack 过渡的

在这期间彻底能够了解他们以前的差别和不一样,更多的应该学习思想

你应该多质问本身,为何这个工具当下会火呢?你应该不该该学习?

我十分不赞同那些拿来即用的同窗,说什么不久以后就死了,学也没什么用,浪费时间,我抄一个不就行了吗?

虽然我写得都很基础,但我仍是但愿您别看个人文章.

若是能给您带来不错的学习体验,麻烦请右上角star : ) hava a nice day

原文地址： http://www.meckodo.com/?p=525

所有代码：https://github.com/MeCKodo/webpack