webpack对脚本和样式的处理

一、对js处理

webpack本身支持js加载也可以用插件。

1、加载要全局使用的插件比如jquery

在页面用cdn方式引用，然后再webpack.config.js里配置。会让jquery成为全局的插件，不用每个js去require。

externals : {'jquery' : 'window.jQuery'}

2、提出公共的js模块打包到base.js。在配置文件plugins配置，这里需要webpack=require(webpack)。

先在entry里配置

'common'  : ['./src/page/common/index.js']

然后再plugins里配置

new webpack.optimize.CommonsChunkPlugin({
    name : 'common',
    filename : 'js/base.js'
})

二、对css样式处理

使用css-loader和style-loader

在module配置：

loaders: [

 { test: /\.css$/, loader: "style-loader","css-loader" }
]

但是这样是打包到js文件里。想单独打包到css需要安装

extract-text-webpack-plugin

然后再先require

var ExtractTextPlugin   = require('extract-text-webpack-plugin');

接着在plugins里配置

new ExtractTextPlugin("css/[name].css")

最后在loader改为

{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") },