今天按照网上的教程学习了webpack+react,虽然在浏览器中访问http://localhost:8080/可以看到效果,但还是有好多疑问。
npm start webpack-dev-server --hot --inline后却找不到打包后的bundle.js文件,这个bundle.js文件在哪呢?
npm run build打包后的bundle.js文件可以看到,但是在浏览器中访问index.html文件的绝对路径页面什么都没有,console中提示Download the React DevTools and use an HTTP server (instead of a file: URL) for a better development experience:,因为我的Apache服务器根目录是www,在浏览器中访问 http://localhost/public/index.html 也没有任何反应,console中提示Download the React DevTools for a better development experience:。难道我只能用http://localhost:8080/ 访问吗?怎么才能访问http://localhost/public/index.html 有效果,也就是说如何把打包后的文件放在Apache服务器中部署。
项目目录树:
package.json文件 scripts部分:
"scripts": {
"start": "webpack-dev-server --hot --inline",
"build": "webpack --progress --profile --colors --config webpack.production.config.js"
},
webpack.config.js:
let path = require('path');
//定义了一些文件夹的路径
let ROOT_PATH = path.resolve(__dirname);
let APP_PATH = path.resolve(ROOT_PATH, 'app');
let BUILD_PATH = path.resolve(ROOT_PATH, 'public');
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + '/app/main.js',
output: {
path: BUILD_PATH,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.less$/,
loaders: ['style', 'css', 'less','postcss'],
include: APP_PATH
},
{
test: /\.jsx?$/,
loader: 'babel',
include: APP_PATH,
resolve: {
extensions: ['', '.js', '.jsx']
}
}
]
},
postcss: [
require('autoprefixer')//调用autoprefixer插件
],
devServer: {
contentBase: './public',
colors: true,
historyApiFallback: true,
inline: true
}
}
webpack.production.config.js:
let path = require('path');
let webpack = require('webpack');
//定义了一些文件夹的路径
let ROOT_PATH = path.resolve(__dirname);
let APP_PATH = path.resolve(ROOT_PATH, 'app');
let BUILD_PATH = path.resolve(ROOT_PATH, 'public');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: __dirname + '/app/main.js',
output: {
path: BUILD_PATH,
filename: 'bundle.js'
},
module: {
loaders: [
{
test : /\.(less|css)$/,
loader: ExtractTextPlugin.extract('style', 'css!less')
},
{
test: /\.jsx?$/,
loader: 'babel',
include: APP_PATH,
resolve: {
extensions: ['', '.js', '.jsx']
}
}
]
},
postcss: [
require('autoprefixer')//调用autoprefixer插件
],
plugins: [
//new webpack.optimize.UglifyJsPlugin(),
//new webpack.optimize.CommonsChunkPlugin('common.js'),
new ExtractTextPlugin('css/[name].css')
]
}
.babelrc:
{
"presets": ["react", "es2015"],
"env": {
// only enable it when process.env.NODE_ENV is 'development' or undefined
"development": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
// if you use React Native, pass "react-native" instead:
"imports": ["react"],
// this is important for Webpack HMR:
"locals": ["module"]
}]
// note: you can put more transforms into array
// this is just one of them!
}]]
}
}
}
index.html
Webpack Sample Projectmain.js入口文件
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class App extends Component{
constructor(props) {
super(props);
}
render() {
let backgroundSrc = './imgs/gondel.jpg';
return (
{backgroundSrc}
);
}
}
ReactDOM.render(,document.getElementById('root'));
访问http://localhost/public/index.html时浏览器错误提示: