webpack配置一

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

wepack中文文档

/**
 * Created by zhanghaov on 2018/3/30.
 * 使用webpack,需要在根目录下配置webpack.config.js
 */

//webpack.config.js 结构
module.exports = {
    entry:{}, //入口文件，指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始
    output:{},//出口，告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件
    module:{},//loader，让 webpack 能够去处理那些非 JavaScript 文件,css文件,sass、less、es6
    plugins:[],//插件，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量
    devServer:{}//基于node.js构建本地服务器，浏览器监听，自动刷新显示修改后的结果（js文件,修改html文件不刷新）
}

先看一个简单的webpack.config.js配置

/**
 * Created by zhanghaov on 2018/3/24.
 */
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin  = require('html-webpack-plugin');

module.exports = {
    devtool:'eval-source-map',//Source Maps
    entry: "./app/main.js",//入口文件
    output: {
        path: path.resolve(__dirname,'build'),//出口
        filename: "bundle.js"//打包后输出文件的文件名
    },
    devServer:{
        contentBase:'./public',//页面目录
        historyApiFallback:true,//不跳转
        inline:true //实时刷新
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader:'babel-loader'
                },
                exclude: /node_modules/
            },{
                test:/\.css$/,
                use:[{
                    loader:'style-loader',
                },{
                    loader:'css-loader'
                }]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin ({ //index.html 模板插件
            template:__dirname + '/app/index.tmpl.html'
        })
    ]
}

猜你喜欢