webpack基础配置梳理梳理

Posted 2020-09-11 Breaveleon

首先来一个示例的目录结构
--- 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

一 webpack的基本项配置

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

二 入口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;
    });

    /**
    *    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 也是可以的
},

四 加载css、style等样式模块的loader

{
    test: /\.(png|jpg|gif)$/,
    loader: ‘url?limit=10000&name=./images/[name].[ext]?[hash:10]‘,
    /*query: {
        limit: 10000,
        name: ‘./images/[name].[ext]?[hash:8]‘
    }*/
},

五 配置环境NODE_ENV

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‘;
}