初学react,利用webpack进行工程化开发管理,遇到一些问题,如多页面处理,跨域代理的设置,如何同时引入使用jQuery。第一次试水,简单写了一个表格组件。
先照着react官网提供的教程使用create-react-app创建react项目(http://www.css88.com/react/do...)
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
OK,第一个react程序跑起来了,然后第一个问题来了,这是一个单页应用,按照以往的开发经验,由于需要开发的平台会比较复杂,需要做成多页面,如何配置成多页面呢:
改造一下my-app目录下的package.json文件(这个文件决定了你前端工程化开发时候需要安装的依赖,包括react也是在这里安装的哦)
附上我的package.json:
{
"name": "my-app",
"version": "1.0.0",
"description": "pack test",
"main": "index.js",
"dependencies": {
"expose-loader": "^0.7.4",
"jquery": "^3.2.1",
"webpack": "^3.10.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.0.0",
"glob": "^7.1.2",
"html-webpack-plugin": "^2.30.1",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"jquery": "^3.2.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.8.1"
},
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack"
},
"author": "albert",
"license": "ISC"
}
我们把原来目录下的node_modules文件夹删除掉,然后在package.json所在目录下跑
npm i
就会自动生成node_modules文件夹并安装我们在package.json里定义的那些依赖了。
package.json里可以看到我要安装jqeury依赖,后面会聊这个。另外想聊一下的是这一句
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack"
}
这里我们指定了npm命令脚本,对应的运行命令分别是 npm start 和 npm run build(一定要加上run,初学跑的时候没带run,一直跑不出来,被这个懵圈了好久o(╥﹏╥)o)
npm start中我们指定了是用webpack的dev server来运行,会启动一个服务器。这个开发的时候用很爽,编辑了代码保存后会热更新,前端代码自动重新构建并通知浏览器刷新。此时打包的文件是在内存中生成的,所以不要费劲去目录下找了,你根本找不到o( ̄︶ ̄)o
npm run build运行后是用来真正生成webpack打包后的文件的,你可以指定输出目录,具体参考webpack.config.js。这个命令生成的文件可以放到后端服务器指定的静态文件目录下,这些就是用来上线的文件。
图片描述
再瞥一眼我的webpack.config.js,这个文件是用来告诉webpack按什么样的方式构建前端工程,如何打包等等,用create-react-app命令生成的目录结构里是没有这个文件的,需要自己新建一个,放在和package.json同级即可。
先贴一个完整的webpack.config.js,你可以不看,晚点再解释里面的一些部分。
const webpack = require('webpack');
const glob = require('glob');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpackConfig = {
entry: {},
output:{
// path:path.resolve(__dirname, './dist/'),
path:path.resolve('C:/wamp64/www/path/'),
filename:'[name].[chunkhash:6].js'
},
//设置开发者工具的端口号,不设置则默认为8080端口
devServer: {
inline: true,
port: 8181,
proxy: {
'/': {
target: 'http://localhost:80',
secure: true,
changeOrigin: true
}
}
},
module:{
rules:[
{
test:/\.js?$/,
exclude:/node_modules/,
loader:'babel-loader',
query:{
presets:['es2015','react']
}
},
{
test: /\.(scss|sass|css)$/,
loader: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader"})
},
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}
]
},
plugins: [
new ExtractTextPlugin("[name].[chunkhash:6].css"),
new CleanWebpackPlugin(
['path'],
{
root: 'C:/wamp64/www/',
verbose: true,
dry: false
}
)
],
};
// 获取指定路径下的入口文件
function getEntries(globPath) {
const files = glob.sync(globPath),
entries = {};
console.log(files)
files.forEach(function(filepath) {
const split = filepath.split('/');
const name = split[split.length - 2];
entries[name] = './' + filepath;
});
return entries;
}
const entries = getEntries('src/**/index.js');
Object.keys(entries).forEach(function(name) {
webpackConfig.entry[name] = entries[name];
const plugin = new HtmlWebpackPlugin({
filename: name + '.html',
template: './public/index.html',
inject: true,
chunks: [name]
});
webpackConfig.plugins.push(plugin);
})
module.exports = webpackConfig;
一.解决多页面问题
原来的目录结构如下,
调整一下目录结构,删掉原来的src目录下内容,新建两个文件夹,然后分别添加两个页面要用的源文件进去(如果想快速试验,可以直接把原来的例子中的src的内容放到两个文件夹下)。 这两个文件夹下的代码文件就是为两个独立的页面准备的。
我的目录结构如下,
未完,更新中... (最新更新时间2018/2/27, 这几天忙着面试,没有更新,等有空我就写完他~)