webpack 配置 (支持 React SCSS ES6 编译打包 和 模块热更新 / 生成SourceMap)
1、首先是目录结构
|-node_modules/ #包文件
|-build/ #静态资源生成目录
|-src/ #开发目录
|-js/
|-index.js #入口文件
|-app.js #React组件文件
|-css/
|-style.scss #SASS样式文件
|-webpack.config.js #webpack开发配置文件
|-index.html
|-package.json
2、webpack配置文件 !important
- entry 入口文件地址:
entry:{
build:"./src/js/index.js"
}
入口文件用来引用其他依赖,最终webpack会把所有依赖打包输出;
入口文件index.js类似这样:
import React, { Component, PropTypes, cloneElement } from 'react';
import ReactDOM from 'react-dom';
import styles from '../css/style.scss';
import App from './app';
ReactDOM.render(<App />, document.getElementById('root'));
起初没有index.js,入口文件为app.js;
app.js最后末尾执行ReactDOM.render,App组件不作为模块输出export, 这样做修改app.js会刷新整个页面,app.js无法进行模块热更新;
最终改为app.js作为模块输出export,用index.js作为入口文件,执行ReactDOM.render渲染DOM.
- output 输出目录
path:打包输出目录
filename:
打包输出的文件名
具体文件名xxx.js或[name].js
[name]为入口entry对象中KEY值 build
publicPath:主要是用在webpack-dev-server,设置bundle的生成路径
publicPath:'/bundle/'
在使用webpack-dev-server时,
index.html中通过<script src="/bundle/build.js"></script>引用bundle
- module.loaders 设置各种webpack loader
module:{
loaders:{
//文件名匹配成功的文件-->执行loaders
test: /\.jsx?$/,
//设置路径范围
include: [
path.resolve(__dirname, './src/js'),
],
//需要执行的loaders
loaders: ['react-hot', 'babel'],
}
}
编译打包React ES6 需要用到react-hot-loader babel-loader
编译打包SCSS css 需要用到style-loader css-loader sass-loader
以 loaders: ['react-hot', 'babel'] 为例
loaders的执行顺序是从右到左:先babel编译,然后执行react-hot模块热更新
- resolve 设置模块扩展名,和依赖的路径
不设置扩展名如'.jsx', 在引入模块时会找不到.jsx文件导致报错
resolve: {
alias: {
'react': path.join(__dirname, 'node_modules', 'react'),
},
extensions: ['', '.js', '.jsx', '.scss', '.css'],
},
- devServer : WDS服务器相关配置
devServer:{
historyApiFallback:true,
hot:true, //热更新
inline:true, //热更新inline模式
progress:true,
port:8888 //设置webpack-dev-server端口
}
- devtool : 设置SourceMap的生成模式
webpack 有多种SourceMap生成模式
推荐使用cheap-module-eval-source-map
devtool: 'cheap-module-eval-source-map'
完整webpack配置文件 webpack.config.js
let path = require('path');
let webpack = require('webpack');
let sassLoader = 'style!css!sass?sourceMap=true&sourceMapContents=true';
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry:{
build:"./src/js/index.js"
},
output:{
path: path.resolve(__dirname,"./build"),
filename:"build.js",
publicPath: '/bundle/',
},
module:{
loaders:[
{
test: /\.jsx?$/i,
include: [
path.resolve(__dirname, './src/js'),
],
loaders: ['react-hot', 'babel'],
},
{
test: /\.scss$/i,
include: [
path.resolve(__dirname, './src/css'),
],
loader: sassLoader
}
]
},
resolve: {
alias: {
'react': path.join(__dirname, 'node_modules', 'react'),
},
extensions: ['', '.js', '.jsx', '.scss', '.css'],
},
devServer:{
historyApiFallback:true,
hot:true,
inline:true,
progress:true,
port:8888 //webpack-dev-server端口
}
}
3、最后是我的package.json文件
{
"name": "moudel",
"version": "1.0.0",
"description": "",
"main": "webpack.cofing.js",
"directories": {
"test": "test"
},
"scripts": {
"bd": "webpack",
"min": "webpack -p",
"watch": "webpack --watch",
"hot": "webpack-dev-server --hot --inline"
},
"author": "",
"license": "ISC",
"devDependencies": {
"async-each": "^1.0.1",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-class-properties": "^6.19.0",
"babel-preset-latest": "^6.16.0",
"babel-preset-react": "^6.16.0",
"chalk": "^1.1.3",
"classnames": "^2.2.5",
"css-loader": "^0.26.1",
"express": "^4.14.0",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.24.1",
"lodash.clonedeep": "^4.5.0",
"node-sass": "^3.13.0",
"react": "^15.4.1",
"react-hot-loader": "^1.3.1",
"react-transform-catch-errors": "^1.0.2",
"redbox-react": "^1.3.3",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.3",
"webpack-dev-middleware": "^1.8.4",
"webpack-dev-server": "^1.16.2",
"webpack-hot-middleware": "^2.13.2"
},
"dependencies": {
"react-dom": "^15.4.1",
"react-redux": "^4.4.6",
"react-router": "^3.0.0",
"redux": "^3.6.0",
"redux-thunk": "^2.1.0"
}
}
