webpack 进阶随笔(配置篇)

最近一个app版块 用了vue+webpack 由于当时比较急 留下很多坑没有解决(特别是webpack)

所以重新填坑 写下笔记 看到哪写到哪 随意~

 

1.webpack 分为以下几种配置

module.exports = {
    entry:{} ,
    output: {},
    module: {
        loaders: []
    },
    plugins:{} 
}

2.entry 是入口 可以为单一的字符串入口,也可以是多个对象入口

3.output是出口 里面的常用配置项有

    output: {
        path:'',
        publicPath:'',
        filename:'',
        chunkFilename:''
    }

　path是生成文件的根目录,为绝对路径,

　publicPath是一个URL地址,常用加载css.jpg.js等文件

　它们的区别是 path针对的本地系统文件 publicPath针对的是浏览器　　

　filename是出口文件 有三个规则可以设置分别是[name] [hash] [chunkhash]

4.module参数用来配置各种loader　

module.loaders: [
  {
    // "test" is commonly used to match the file extension
    test: /\.jsx$/,

    // "include" is commonly used to match the directories
    include: [
      path.resolve(__dirname, "app/src"),
      path.resolve(__dirname, "app/test")
    ],

    // "exclude" should be used to exclude exceptions
    // try to prefer "include" when possible

    // the "loader"
    loader: "babel-loader"
  }
]

　test:需要配置的文件属性

　exclude:剔除掉 需要忽略的资源

　include:本条loader发生作用的文件

　loaders:指示用那些loaders处理这段

　

　以上是官方例子