不多说直接上配置文件:
var path = require('path');
var webpack = require('webpack');
//引用单独打包模块
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var node_modules = path.resolve(__dirname, 'node_modules');
//每当 "react" 在代码中被引入,它会使用压缩后的 React JS 文件,而不是到 node_modules 中找。
//每当 Webpack 尝试去解析那个压缩后的文件,我们阻止它,因为这不必要
//var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
var deps = [
'react/dist/react.min.js',
'react-router/dist/react-router.min.js',
'moment/min/moment.min.js',
'underscore/underscore-min.js',
];
var config = {
devtool: 'inline-source-map',
debug: true,
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
path.resolve(__dirname, 'app/main.js')
]
,output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
}
,plugins:[
//new ExtractTextPlugin("style/style.css", {allChunks: true})// 配置css 单独打包
]
,module: {
loaders: [
{ test: /\.jsx$/, // 用正则来匹配文件路径,这段意思是匹配jsx
loader: 'jsx!babel', // 先把es6转为es5再用jsx把react 模板生成
exclude:/node_modules/
//loaders:['react-hot','babel']
},
//babel 可以将es6代码转换成es5的代码
{ test: /\.js$/, // 用正则来匹配文件路径,这段意思是匹配 js
loader: 'babel', // 加载模块 "babel" 是 "babel-loader" 的缩写
exclude:/node_modules/
//loaders:['react-hot','babel']
}
,{
test: /\.css$/, // Only .css files
loader: 'style!css' // Run both loaders
}
,{
test: /\.less$/,
loader: 'style!css!less'
}
,{
test: /\.scss$/,
loader: 'style!css!sass'
}
,{
test: /\.(png|jpg|jpeg)$/,
loader: 'url-loader?limit=2000'
}
,{
test: /\.woff$/,
loader: 'url?limit=100000'
}
,{
//使用暴露全局加载器来暴露压缩版的 React JS,???????????
//比如 react-router 需要这个。
test:path.resolve(node_modules, deps[0]),
loader:"expose?React"
}
,{
//配置jquery在页面全局访问,也就是在控制器可以访问到$
//但是模块内用$还是需要引用jquery
test: require.resolve('jquery'), loader: 'expose?jQuery'
}
],
preLoaders: [ //代码检查
/* {
test: /\.jsx?$/,
exclude: /node_modules/, //不检测本文件下的文件
loader: 'eslint-loader' //使用的模块
}, */
] ,
noParse: []//[pathToReact] //不需要解压的文件
}
,resolve:{
//自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
extensions: ['', '.js', '.json', '.coffee'] ,
//模块别名定义,方便后续直接引用别名,无须多写长长的地址
alias:{
//'react':pathToReact//当引用react时用指定的文件
//appstore:'js/XX'//直接require('appstore') 引用
}
}
};
// 通过在第一部分路径的依赖和解压
// 就是你像引用 node 模块一样引入到你的代码中
// 然后使用完整路径指向当前文件,然后确认 Webpack 不会尝试去解析它
deps.forEach(function (dep) {
var depPath = path.resolve(node_modules, dep);
config.resolve.alias[dep.split(path.sep)[0]] = depPath;
config.module.noParse.push(depPath);
});
module.exports = config;
使用:
这是针对开发中用的。
需要在package.json内配置:
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build",
"deploy": "webpack -p --config webpack.production.config.js"
},
这样直接npm run dev就可以运行了。
然后打开localhost:8080就可以访问了。
开发中的js css img jsx 放在app内。而运行时访问的是build下的index.html
页面页需要手动引用bundle.js和webpack-dev-server.
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="bundle.js"></script>
访问时它不会在build下生成bundle.js文件,而是动态生成。
app.js内需要加载jsx组件,css模块。
最主要的是react.render渲染组件。
app.js内可以用require 引用也可以用es6 import 引入。
配置解析:
entry内配置了启动服务和main目录
output内配置生成目录和文件名
loaders内配置解析文件模块,常用的是js jsx css 图片 等解析。
jsx需要用jsx和bable两个模块解析,从后到前解析的,先babel处理完后再用jsx来处理
babel实现把es6转为es5。
exclude表示不处理的文件夹
图片用url处理,后可以通过?来传递参数,limit表示图片小于XXkb时用base64内联
test: require.resolve('jquery'), loader: 'expose?jQuery'
这比较独特,实现的是在页面全局内可以访问到$
而在模块内还是需要require('jquery')来引用使用的。