webpack的配置

[foxlele2014]

需要认真看看文档。
（不过现在拿现有的配置来分析下先＝ ＝。）

[foxlele2014]

entry
output

多入口：
写成对象。

明明官网都写的很明白了（我还硬是不想看，想拿现成的配置来解读。。。。）

entry = {
login:'./login.js',
index:'./index.js'
}

output:{
            path:       path.join(__dirname, 'build/'),
            publicPath: '/build/',
            filename:   '[name].js'
        },


resolve :{
alias:{
              pages: path.resolve(__dirname, ROOT_PATH+'/pages'),
              utils: path.resolve(__dirname, ROOT_PATH+'/utils'),
              components: path.resolve(__dirname, ROOT_PATH+'/components'),
}//配置别名
extension:['.js','.jsx']//配置扩展名
}

//模块的加载
module:{
rules: [{
                    test: /\.less$/,
                    use: [{
                        loader: "style-loader" // creates style nodes from JS strings
                    }, {
                        loader: "css-loader" // translates CSS into CommonJS
                    }, {
                        loader: "less-loader" // compiles Less to CSS
                    }]
                },
                {
                    test:    /\.jsx?$/,
                    loader:  'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test:    /\.(png|jpg|gif|svg|webp|ico)$/,
                    loader:  'url-loader?limit=8192&name=img/[path][hash:8].[name].[ext]',
                    exclude: /node_modules/
                },
                {
                    test:    /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                    loader:  'file-loader?limit="8129',
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    loader: 'style-loader!css-loader',
                    include: /flexboxgrid/
                }
            ]

}


plugins:[


]

http://www.cnblogs.com/Leo_wl/p/4862714.html

[foxlele2014]

zhengweikeng/blog#10

[foxlele2014]

https://fakefish.github.io/react-webpack-cookbook/Introduction-to-Webpack.html

[foxlele2014]

用了webpack配置了tpl的loader之后，然后假如在require tpl文件的时候加了require(tpl!index/index.tpl);

一开始不知道原来tpl!这种是用来解析tpl文件的

相当于是重复了loader。

就会出现这样的情况

正常的

---------------------- 分割线 ------------------------------

这个就是不先看一遍文档之后再实践的坏处

[foxlele2014]

webpack

[foxlele2014]

wepack 只对引入的文件进行编译（例如图片，）
有点很神奇的事，写在css里的图片路径webpack可以识别出来并且进行编译，
但是写在jsx里的却没法识别，假如直接写路径的话，
这时需要对这个图片进行require
如：
<img src={require('../res/img/aaa.png')} />

可不可以配置成将目录里的img都进行编译打包呢~？

多个img的时候不想每个都require一下

[foxlele2014]

webpack流程
插件运行机制
webpack脚手架
插件编写

[foxlele2014]

体积减小

[foxlele2014]

为什么第二次会失效呢？？？

它的提取是只会以模块来划分。加入里边的代码只是部分代码相同，但是不是相同模块的话，是没法提取出来的。

共同模块与第三方库

[foxlele2014]

之前说使用commonsChunkPlugin的时候，提取了公共的vendor之后，为了使hash不会每次编译都变化，就会增加一个文件。
即使再使用commonsChunkPlugin一次。

为什么hash会变化了，主要是，会再编译后的chunk里加入webpack runtime代码。。这个代码主要是起到map作用。。因为修改了其他文件，那么map里对应的某个id肯定会发生变化，所以呢。hash就会发生变化。

加一个就是提取这部分代码。

所以图片里的manifes那个，没有这个文件是因为最后的runtime代码在commons里了。。

应该是commonsChunkPlugin这个插件会在最后使用这个插件的chunk里加入这段runtime代码。

这几部分也不太懂，里边的代码会重复吗，不太懂，为啥dll里边已经有了，为啥还要用vendor。

[foxlele2014]

webpack构建优化

[foxlele2014]

一张图

[foxlele2014]

publicPah /contentBase

背景：
使用了webpack-dev-server的项目，它编译后的代码是存储在内存里边的，不会生成在项目里的目录里，然后问题来了，js是从服务器里读取，但是图片这些静态资源依旧是存原来的生成目录中读取，因为编译后的图片不在目录里，导致没法读取到。这时配置了图片生成的publicPath，（相当于是给资源加载时加上了prefix前缀），是可以变成从服务器里加载的。但是编译后报错了。恩。

然后contentBase表示的是其他不从服务器里获取的都从这个目录下读取。（不是前缀，相当于是资源读取的根目录，基于子目录加载资源）