webpack-webpackConfig-配置说明-多页面

最新推荐文章于 2024-05-13 09:30:57 发布

weixin_33860553

最新推荐文章于 2024-05-13 09:30:57 发布

阅读量313

点赞数

文章标签： webpack ViewUI

原文链接：http://www.cnblogs.com/vs1435/p/7240592.html

版权

入口文件entry 配置

例子：

项目目录结构：

├─src # 当前项目的源码
    ├─pages # 各个页面独有的部分，如入口文件、只有该页面使用到的css、模板文件等
    │  ├─alert # 业务模块
    │  │  └─index # 具体页面
    │  ├─index # 业务模块 │ │ ├─index # 具体页面 │ │ └─login # 具体页面

*/

var path = require('path');
var glob = require('glob');

var option = {
    cwd: path.resolve(__dirname, './src/pages'),
    sync: true // 这里不能异步，只能同步           
}
var globInstance = new glob.Glob('!(_)*/!(_)*', options);

var pageArr = globInstance.found;//一个数组，形如['index/index', 'index/login', 'alert/index']

//每一个入口文件都相当于entry里的一项，因此这样一项一项地来写实在是有点繁琐,使用 glob 模块读取目录结构，拼接项目页面输出
var configEntry = {};
pageArr.forEach((page) => {
      configEntry[page] = path.resolve(dirVars.pagesDir, page + '/page');
});

// configEntry = {
//     'alert/index': './src/pages/alert/index/page',
//     'user/index': './src/pages/user/index/page',
//     'index/index': './src/pages/index/index/page'
// }

module.exports = {
    entry: configEntry
}

输出文件：output参数

例子：

var configOutput = {
    path: path.resolve(__dirname, './build'),
    publicPath: '/',
    filename: '[name]/entry.js',    
    chunkFilename: '[id].bundle.js',
};

module.exports = {
    output: configOutput
}

output参数告诉webpack以什么方式来生成/输出文件， output相当于一套规则，所有的入口都必须使用这一套规则，不能针对某一个特定的入口来制定output规则。output参数里有这几个子参数是比较常用的：path、publicPath、filename、chunkFilename

path

path参数表示生成文件的根目录，需要传入一个绝对路径。 path参数和后面的filename参数共同组成入口文件的完整路径

publicPath

publicPath参数表示的是一个URL路径，用于生成css/js/图片/字体文件等资源的路径，以确保网页能正确地加载到这些资源
publicPath参数跟path参数的区别是：path参数其实是针对本地文件系统的，而publicPath则针对的是浏览器；
publicPath既可以是一个相对路径，如示例中的'../../../../build/'，也可以是一个绝对路径如http://www.xxxxx.com/。
如果遇到在开发环境加载图片可以显示，生产环境就加载失败的情况，可能是没有配置publicPath

filename

filename属性表示的是如何命名生成出来的入口文件，规则有以下三种:

[name]，指代入口文件的name，也就是上面提到的entry参数的key，因此，我们可以在name里利用/，即可达到控制文件目录结构的效果
[hash] ，指代本次编译的一个hash版本，只要是在同一次编译过程中生成的文件，这个[hash]的值就是一样的；在缓存的层面来说，相当于一次全量的替换
[chunkhash]，指代的是当前chunk的一个hash版本，也就是说，在同一次编译中，每一个chunk的hash都是不一样的；而在两次编译中，如果某个chunk根本没有发生变化，那么该chunk的hash也就不会发生变化。这在缓存的层面上来说，就是把缓存的粒度精细到具体某个chunk，只要chunk不变，该chunk的浏览器缓存就可以继续使用。

chunkFilename

chunkFilename参数与filename参数类似，都是用来定义生成文件的命名方式的，只不过，chunkFilename参数指定的是除入口文件外的chunk的命名（这些chunk通常是由于webpack对代码的优化所形成的，比如因应实际运行的情况来异步加载）

例如：如果使用了插件 webpack.optimize.CommonsChunkPlugin 抽取所有通用的js部分，该插件就会生成一个公共的js 文件，chunkFilename就是设置输入的文件名

例中的对于key为'index/login'的入口文件，生成出来的路径就是build/index/login/entry.js了

module 配置

webpack拥有一个类似于插件的机制，名为Loader，通过Loader，webpack能够针对每一种特定的资源做出相应的处理

test参数用来指示当前配置项针对哪些资源，该值应是一个条件值(condition)。
exclude参数用来剔除掉需要忽略的资源，该值应是一个条件值(condition)。
include参数用来表示本loader配置仅针对哪些目录
loader/loaders参数，用来指示用哪个/哪些loader来处理目标资源，这俩货表达的其实是一个意思，只是写法不一样，用loader写成一行，多个loader间使用!分割，形如loader: 'css?!postcss!less'，目标资源先经less-loader处理过后将结果交给postcss-loader作进一步处理，然后最后再交给css-loader。

例子：生产的配置var dirVars = require('../base/dir-vars.config.js');

var eslintFormatter = require('eslint-friendly-formatter');
module.exports = {
  rules: [
    // eslint 代码检查
    {
        test: /\.js$/,
        enforce: 'pre',
        loader: 'eslint-loader',
        include: dirVars.srcRootDir,
        exclude: /bootstrap/,
        options: {
            formatter: eslintFormatter,
            fix: true,
        }
    },
    
    // es6转换
    {
        test: /\.js$/,
        include: dirVars.srcRootDir,
        loader: 'babel-loader',
        options: {
        presets: [['es2015', { loose: true }]],
            // 参数默认为false ，则相当于开启cache。这里的cache指的是babel在编译过程中某些可以缓存的步骤
            cacheDirectory: true,
            // ，不用这transform-runtime ，babel会为每一个转换后的文件 添加一些辅助的方法；
　　　　　　  //  用了这个plugin，babel会把这些辅助的方法都集中到一个文件里统一加载统一管理，
　　　　　　　plugins: ['transform-runtime']
        },
    },

    {
        test: /\.html$/,
        include: dirVars.srcRootDir,
        loader: 'html-loader',
    },

    // ejs
    {
        test: /\.ejs$/,
        include: dirVars.srcRootDir,
        loader: 'ejs-loader',
    },

    // 图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64 ;  如下配置，将小于8192byte的图片转成base64码
    {
        test: /\.(png|jpg|gif)$/,
        include: dirVars.srcRootDir,
        loader: 'url-loader',
        options: {
            limit: 8192, 
            name: './static/img/[hash].[ext]',
        },
    },

    // 专供bootstrap方案使用的，忽略bootstrap自带的字体文件
    {
        test: /\.(woff|woff2|svg|eot|ttf)$/,
        include: /glyphicons/,
        loader: 'null-loader',
    },

    // 专供iconfont方案使用的，后面会带一串时间戳，需要特别匹配到
    {
        test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
        include: dirVars.srcRootDir,
        loader: 'file-loader',
        options: {
            name: 'static/fonts/[name].[ext]',
        },
    },

    // 使用 extract-text-webpack-plugin就可以把css从js中独立抽离出来
    {
        test: /\.css$/,
        exclude: /node_modules|bootstrap/,
        // loader: ExtractTextPlugin.extract('css?minimize&-autoprefixer!postcss'),
        use: ExtractTextPlugin.extract([
            {
              loader: 'css-loader',
              options: {
                    minimize: true,         // 代码压缩
                    '-autoprefixer': true   // 关闭autoprefixer已避免你的废弃CSS代码被css-loader删除了
              },
            },
            {
              loader: 'postcss-loader'
            },
        ])
    },
    // css
    {
        test: /\.css$/,
        include: /bootstrap/,
        use: ExtractTextPlugin.extract([
            {
                loader: 'css-loader',
            }
        ])
    },
    // less
    {
        test: /\.less$/,
        include: dirVars.srcRootDir,
        use: ExtractTextPlugin.extract([
            {
                loader: 'css-loader',
                options: {
                    minimize: true,         // 代码压缩
                    '-autoprefixer': true   // 关闭autoprefixer已避免你的废弃CSS代码被css-loader删除了
                },
            }, 
            {
                loader: 'postcss-loader' 
            },
            {
                loader: 'less-loader'
            }
        ])
    }

  ],
};