webpack 使用经验记录

css模块导入依赖控制（webpack 中使用postcss 导入依赖问题）

问题1

直接在 entry 指定css文件，依赖顺序无法控制，极不稳定，会出现基础css在编译后跑到后面去

js 中 require css问题依旧

解决
在css中 @import 问题解决，但有另一个问题

但产生
问题2：
css 中的@import 模块没法在 resolve.modules 指定的路径中寻找模块
(记得过去是可以的，不清楚是不是更新后有所调整)

解决
使用 postcss-smart-import 插件，path 属性中指定属性

module.exports = {
  plugins: [
    require('postcss-smart-import')({
      path: ['E:/_work/Dropbox/github/modules/base-libs/css']
    })
  ]
}

可 按需/异步 加载

即只有到真正用的时候才加载
下面2种方式效果一样。不过很奇怪，很早以前用 import('moduleA') 只能异步，却无法按需。即虽然没运行，但固定会加载此js

使用 import (荐)

例子直接使用 node_modules 中的模块，当然也可以指定路径模块

function determineDate() {
    import('katex').then(function(moment) {
        console.log(moment);
    }).catch(function(err) {
        console.log('Failed to load moment', err);
    });
}
//console.log(determineDate)// 只是声明，但不执行，看是否下载js。结果是不会下载，实现了按需
setTimeout(determineDate,1000)// 是否是1s后下载js。结果是的，实现了按需

使用 bundle-loader

下例用了路径模块，当然也可以直接使用 node_modules 中的模块

function determineDate() {

    var waitForChunk = require('bundle-loader!./file.js')
    // var waitForChunk = require(bundle-loader?lazy&name=[name]!./file.js)

    waitForChunk(function (file) {
        console.log(file)
    });

}

//console.log(determineDate)// 只是声明，但不执行，看是否下载js。结果是不会下载，实现了按需
setTimeout(determineDate,1000)// 是否是1s后下载js。结果是的，实现了按需

可按需引入构建的包

之前出现这样的现象，通过CommonsChunkPlugin打出的某独立包某页面并不需要，但不引入却会报错。那时误以为，CommonsChunkPlugin打出的包都是关联的，所有页面必须全部引入，其实不是。

发现原因：
之前要引入所有包，是因为 CommonsChunkPlugin > names数组头居然生成了其他模块，关键我并没有指定这种模块(其实生成的这种不相干的模块应该生成到尾部才是。。。)。即某个生成的模块还包含其他模块，而这个其他模块某页面是必须的。
解决很简单，2种方案：
1. 可以查看源码，把这个多出来的模块固定打入某个公共包
2. names数组头尾都放公共包

问题代码：

module.exports ={
    entry:{
        common: ['zoom-touch', 'Popup', 'vue', 'common-mobile', 'slider-one-load','msg-mobile','string-handle',"j/common.js"],
        
        // click-vue 生成进来了，明明没有指定。这个模块所有页面都会用，预想是生成进 names 数组尾部才是，即common中。
        // 结论：`CommonsChunkPlugin` > `names` 头尾都不干净，中间才干净。或者内部依赖问题所致
        katex:[ 'katexcss','katex', './src/js/modules/latexParse.js']
    },
    plugins:[
        new webpack.optimize.CommonsChunkPlugin({           
            names:['katex','common']
        })
    ]    
}
    

webpack 使用场景，与其他打包工具比较

webpack / browserify 主要用来打包web应用

打包独立模块请用 rollup

alias 精简模块路径

可指向路径，还可直接指向模块

1. 定义别名

module.exports = {
    resolve: {
        alias: {
            // 路径
            j:'./src/js',
        
            // 模块
            ChunkedShow: 'E:/_work/Dropbox/github/modules/chunked-show/src/v1/chunked-show.js'
        
        }
    }
}

1. 使用别名

// 1路径
import {ChunkedShow} from 'j/index'; // 相当于 ./src/js/index

// 2模块
import {ChunkedShow} from 'ChunkedShow';

转载于:https://www.cnblogs.com/cqlql/p/7097015.html