webpack与框架的应用：vue、react；webpack与自动化工具的应用：gulp

webpack+vue

  • Vue是一套用于构建用户界面的渐进式框架
  • Vue.js的特性：轻量级的框架、双向数据绑定、指令、插件化。
  • 有自己的webpack脚手架（建议用，不用自己设置）：vue-cli。

  • 用vue-cli来搭建一个项目：

    • npm install -g vue-cli
    • vue init webpack my-project
    • cd my-project
    • npm install
    • npm run dev
  • 启动服务后，在浏览器中输入：http://localhost:8080
  • 在项目下面的src/App.vue和src/main.js中输入自己的代码即可。

webpack+react

  • React是目前非常热门的一个JavascriptMVC框架。

  • 主要以虚拟DOM而闻名。

  • 组件化、易复用解耦、数据控制视图 、没有太多api，知道对应的写作模式就可以上手。

  • 与webpack结合是标配。

  • webpack+react实例

    • 需要安装的npm包，以及路径。

    • 新建main.jsx文件

      import React,{Component} from 'react';
import ReactDOM from 'react-dom';

class Hello extends Component{
    render(){
        return (
            <div>
                <h1>Hello world</h1>
                <p>这是一个react的demo</p>
            </div>
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById('content'));

    • 如下：webpack.config.js配置，如下：

      var path = require('path');
module.exports = {
    entry:  __dirname + '/app/main.jsx',
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js',
    },
    devtool: 'eval-source-map',
    module: {
        rules:[{
                test: /\.(js|jsx)$/,
                use: [
                    {
                        loader: 'babel-loader'
                    }
                ],
                exclude: /(node_modules|bower_components)/,
            }]
    }
};

    • 生成的页面：

      <!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>React Test</title>
</head>
<body>
  <div id="content"></div>
  <script src="bundle.js"></script>
</body>
</html>

webpack+gulp

  • 两者一起合作：前端工程化；更好的管理前端代码；同时符合现有项目配置。

    • gulp：处理html压缩/预处理/条件编译，图片压缩，图片自动合并等任务；
    • webpack：管理模块化，构建js/css。

  • 插件：gulp-webpack，将webpack结合到gulp中。

//引入js 模块化工具gulp-webpack,
var webpack = require('gulp-webpack');
var jsFiles = [
    './src/scripts/app.js'
];
gulp.task('packjs',function () {
    gulp.src(jsFiles)
    .pipe(webpack({
        output:{
            filename:'[name].js'
        },
        module:{
            loaders:[
                {
                    test:/\.js$/,
                    loader:'imports?define=>false'
                }
            ]
        }
    }))
    .pipe(gulp.dest('./build/prd/scripts/'))
})
  • webpack原生方法
// webpack任务
var _ = require('lodash');
var del = require('del');
var webpack = require('webpack');
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var newer = require('gulp-newer');
var logger = require('gulp-logger');

var project = require('../lib/project')();
var config = require('../config.' + project).webpack;
var compileLogger = require('../lib/compileLogger');
var handleErrors = require('../lib/handleErrors');


// 生成js/css
gulp.task('webpack', ['clean:webpack'], function(callback) {
    webpack(require('../webpack.config.js')(), function(err, stats) {
        compileLogger(err, stats);
        callback();
    });
});

// 生成js/css-监听模式
gulp.task('watch:webpack', ['clean:webpack'], function() {
    webpack(_.merge(require('../webpack.config.js')(), {
        watch: true
    })).watch(200, function(err, stats) {
        compileLogger(err, stats);
    });
});

// 生成js/css-build模式
gulp.task('build:webpack', ['clean:webpack'], function(callback) {
    webpack(_.merge(require('../webpack.config.js')('production'), {
        devtool: null
    }), function(err, stats) {
        compileLogger(err, stats);
        callback();
    });
});

// 清理js/css
gulp.task('clean:webpack', function() {
    return del([
        config.jsDest,
        config.cssDest
    ], { force: true });
});

详见【demo13-vue、demo14-react】

以上文章来自：黄卉 ， https://huanghui8030.github.io/webpack/apply.html