React-工作遭遇-webpack.config.js流程解析

 原先写项目的时候,写了一年多的react.后来发现.其实自己搭建一个也是很简单的,如何开始,得先从webpack.config.js开始讲起

[code]// 导入webpack
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
// 定位点
entry: [
'babel-polyfill',
'./src/index'
],
mode: 'development',
output: {
publicPath: '/'
},

module: {
// 浏览器识别
rules: [{
test: /\.js[x]?$/,
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,
loader: 'babel-loader?cacheDirectory',

},
{
test: /\.less$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9' // React doesn't support IE8 anyway
]
})
]
}
},
{
loader: 'less-loader'
}
],
exclude: /\.useable\.less$/
},
{
test: /\.useable\.less$/,
use: [{
loader: 'style-loader/useable'
},
{
loader: 'css-loader'
},
{
loader: 'less-loader'
}
],
exclude: /node_modules/
}],
noParse: [
/moment-with-locales/,
/react.production.min/,
/react-router-dom.production.min/,
/redux.min.js/,
/react-router.min.js/,
/redux-saga.min.js/
]
},
resolve: {
extensions: ['.js', '.jsx'],
modules: [path.resolve(__dirname, 'node_modules')],
alias: {
'moment': 'moment/min/moment-with-locales.min.js',
'react-dom': 'react-dom/umd/react-dom.production.min.js',
'react': 'react/umd/react.production.min.js',
'redux': 'redux/dist/redux.min.js',
'react-router-dom': 'react-router-dom/umd/react-router-dom.min.js',
'redux-saga': 'redux-saga/dist/redux-saga.min.js'
}
},
devtool: 'eval-source-map',
// 设置服务
devServer: {
contentBase: './dist',
// 端口
port: 8080,
// 热更新
hot: true,
historyApiFallback: true,
// 设为0，0，0，0就能让其他设备访问了
host: '0.0.0.0',
// 如果设置为open.则在npm run dev的时候便会启动浏览器
// open:true,
disableHostCheck: true,
headers: {
'Access-Control-Allow-Origin': '*'
},

proxy: {
// 将包含test请求都发出去
'/test/*': {
target: 'http://192.168.2.154:3001',
changeOrigin: true,
secure: false,
// 替换包含test的接口
// pathRewrite: {
//     '^/test/*': ''
// }
}
}
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new webpack.ProvidePlugin({
$: 'jquery'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};

附上我github项目地址:

https://github.com/ccx1/ConsoleView 目前编写了一个sdk控制台架子

https://github.com/ccx1/ReactBasic 编写了一个底层技术框架