Webpack-coc NPM

最开始,这个项目是个demo类的教程,教程已经迁移到webpack-coc-demo

#WebpackCoc 可以先看上面教程,这样会更好理解本项目的目的.

整体的想法和文章是一致的.但是实际使用的过程中,发现

路径问题很让人纠结,经常出问题,微调很耗时.
另外一个工程里,可能有多个项目,这时候会有多个webpack.config.js,维护多个配置文件还是挺蛋疼的.
lib的打包比较慢.（后面知道通过CommonChunkPlugin的一个特别用法,也能搞定,不过个人认为lib就是lib,和common是有区别的)

#说明:

本项目多少有些功能,是为公司的使用而设计的.不过webpack的构建都是通过配置来的,你可以在执行前,改变配置就好.如果实在不爽,可以根据自己的业务,做相应的版本.

如果不改变配置,那么

只支持npm,依赖node_modules的路径.bower已死,不要纠结.
静态文件不改变命名,静态资源map文件中,通过加?v=[chunkhash]来加文件戳
所有的entry,必须以*.entry.js命名
CommonChunk的依据: 被引用3次以上,文件以*.common.*命名,且被至少一个entry文件依赖
lib 目前只支持jquery,react,react-dom.但是加入新的lib并不难.比如加入vue并引人vue-loader只需要不到10行的代码.但是lib必须要暴露到全局.

#安装

npm install webpack-coc

#使用

var  path = require('path')

var  WebpackCoc = require('webpack-coc')

//配置参数后面详述
var configMgr = new  WebpackCoc({
    project_name:'webpack-coc',
    src_path:path.join(__dirname , './assets/src'),
    dist_path:path.join(__dirname, './assets/dist'),
    node_module_path:path.join(__dirname,'../node_modules'),
    map_json_filename:'./assets/assets-map.json',
    map_json_path:__dirname,
    libs:['react','react-dom','jquery'],
    cdn_path:'/dist',
    dev_port:'9527'
})

//生成构建
configMgr.buildProduction() //会返回最终生效的配置对象,可以打印出来确认
configMgr.runProduction();

//开发环境
configMgr.buildDevelopment()
configMgr.runDevelopment()

#参数说明

project_name:项目名称,必填.所有文件都会生成在文件名为project_name的文件夹下

src_path: 源代码所在的根路径,必填

dist_path: 打包文件的根路径.所有的打包文件都在dist_path/project_name下

node_module_path:node_modules的路径,只支持npm的管理,用bower的话,你需要自己修改相应的配置甚至源代码

map_json_filename和map_json_path:静态资源映射文件的文件名和路径.这个文件的内容形式如下,标准json格式

{
  "webpack-coc/lib": {
    "js": "/dist/webpack-coc/lib.js?v=ac46dc0f05a4cc181b911ad1b8058f71e6fbc87d"
  },
  "webpack-coc/common": {
    "js": "/dist/webpack-coc/common.js?v=06598d42aaaed794fc9f",
    "css": "/dist/webpack-coc/common.css?v=06598d42aaaed794fc9f"
  },
  "webpack-coc/index/index.entry": {
    "js": "/dist/webpack-coc/index/index.entry.js?v=6a573fbcbb9245b32f9b",
    "css": "/dist/webpack-coc/index/index.entry.css?v=6a573fbcbb9245b32f9b"
  },
  "webpack-coc/contact/contact.entry": {
    "js": "/dist/webpack-coc/contact/contact.entry.js?v=b2e27e29b6fd11004a49"
  },
  "webpack-coc/other/other.entry": {
    "js": "/dist/webpack-coc/other/other.entry.js?v=95edb51bcbc304ccd1ad"
  }
}

libs:需要的libs.默认配置了jquery,react,react-dom,所有的配置必须以WebpackCoc.LibMap的属性存在.jquery为例,

WebpackCoc.LibMap['jquery']={
    path:'[node_module_path]/jquery/dist/jquery.min.js',
    externals:'jQuery'
    //noParse:'[node_module_path]/jquery/dist/jquery.min.js',
    //noParse和alias一般和path一样,如果不一样,再设置
},

有了上面的配置,会自动配置webpack的alias和noParse,合并所所有的libs,合并成lib.js.注意,仅仅是合并,并不压缩,所以提供的path应该是dist版本的路径

如果要添加新的lib,基本同上,然后options中libs包含vue即可

WebpackCoc.LibMap['vue']= {
    vue:{
        path:'[node_module_path]/vue/dist/vue.min.js',
        externals:'Vue'
    }
}

cdn_path: cdn路径.css中应用图片的路径,如果不设置cdn路径的话,会是background:url(/project_name/img/../xx.png). 但是这个可能不是你静态文件的根路径,前面要加路径.所以图片路径配置为[cdn_path]/project_name/img/../xx.png

dev_port: webpack-dev-server开发时,服务的端口号.

#开发

本工具会自动识别`src_path`下所有 `*.entry.js`文件.假设现在开发index页,那么建文件夹index,然后添加`index.entry.js`,就可以写代码了

//index/index.entry.js
//支持babel stage-0 的语法
import ReactDOM from 'react-dom' //引人库
import IndexContainer from './IndexContainer.js' //引人js文件,这里假设范围react组件
import './index.less' //引人less
import logo from '.img/logo.png' //引人图片

//index的一些逻辑
ReactDom.render(
    <div>
        <IndexContainer />,
        <img src={logo}>
    </div>
    document.body
)

打包后,[cdn_path]/[project_name]路径下,会生成index/index.entry.js,index/index.entry.css

在图片目录下([cdn_path]/[project_name]/img/),生成logo-[hash].png,

而且引用图片的路径都会变为cdn_path/project_name/img/logo-hash.png.图片引用的路径问题,完全不用你操心.

#example

webpack-coc-example

webpack,f2e build solution,convention over configuration