使用webpack工具需要配置一个根目录下的配置文件，文件名默认为webpack.condfig.js，配置文件导出一个模块对象，包含了webpack工具的相关配置参数，这个模块对象将会以参数形式被引用。
参数 ： entry
该参数对象指明了入口文件的配置:
//页面入口文件配置
entry: {
demo : [baseUrl + "demo.js"],
},
参数 : output
该参数对象指明了文件被工具经过打包等操作后的输出配置，包括输出的文件的存放位置和文件名称等:
//文件输出配置
output: {
path: 'src/js',
filename: '[name].js',
},
参数 : plugins
该参数对象指明了工具将应用上哪些插件，每个插件都被封装为一个类，引用时需要new生产，例如：
webpack/lib/optimize/CommonsChunkPlugin:该插件用于封装文件间公共复用的部分，使代码更合理，简洁。
- webpack/lib/optimize/CommonsChunkPlugin:该插件用于封装文件间公共复用的部分，使代码更合理，简洁。
- webpack.ProvidePlugin: 该插件用于为了避免重复在每个模块里重复require我们需要的库，集中设置这些引用的库并直接使用在每个模块中。
//插件项
plugins: [
new CommonsChunkPlugin("common.js"),
new webpack.ProvidePlugin({
$ : "jquery",
}),
],
参数 : module
该参数对象指明了相关加载器配置，加载器非常有用，它保证了工具对现有的前端资源的扩展性，它可以加载并解析各种前端资源，相应的加载器需要npm install安装
module: {
//加载器配置
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.(js|jsx)$/, loader: 'jsx-loader?harmony' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=25000'},
{ test: /\.(hbs|html)$/, loader: "handlebars"},
]
},
参数 : resolve
该参数指明了其他基本配置
resolve: {
//查找module的话从这里开始查找
root: 'E:/github/flux-example/src', //绝对路径
//自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
extensions: ['', '.js', '.json', '.scss'],
//模块别名定义，方便后续直接引用别名，无须多写长长的地址
alias: {
AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可，
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
全部代码
var webpack = require('webpack');
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var baseUrl = "./src/dev/pactions/";
module.exports = {
//页面入口文件配置
entry: {
demo : [baseUrl + "demo.js"],
},
//文件输出配置
output: {
path: 'src/js',
filename: '[name].js',
},
//插件项
plugins: [
new CommonsChunkPlugin("common.js"),
new webpack.ProvidePlugin({
$ : "jquery",
}),
],
module: {
//加载器配置
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=4096'},
{test: require.resolve('jquery'), loader: 'expose-loader?$'},
]
},
//其它解决方案配置
resolve: {
root:'G:/baseNode/baseNd/baseNd/views', //绝对路径
extensions: ['', '.js', '.json', '.scss'],
alias: {
AppStore : 'js/stores/AppStores.js',
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
};
