好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有快速目录的地方写的,之前是分为了10个文件)所使用的一些包可能进过不断的迭代升级已不支持
//生成package.json npm init
npm install react react-dom --save npm install webpack@3.10.0 webpack-dev-server@2.7.1 --save-dev npm install webpack@3.10.0 wepack-dev-server@2.7.1 -g
webpack-dev-server@2.7.3是最后兼容ie9的版本,升级之后会导致打包的文件在ie9下运行报错
npm install babel-core 核心功能 babel-loader babel-polyfill 转换低版本代码 babel-preset-env 解析Es6 babel-preset-react 解析JSX --save-dev
npm install css-loader style-loader file-loader url-loader image-webpack-loader html-loader --save-dev
当npm install时,会下载dependencies和devDependencies中的模块,当使用npm install –production或者注明NODE_ENV变量值为production时,只会下载dependencies中的模块
//.babelrc { "presets": [ "react", "env" ] }
const path = require('path'); module.exports = { context: path.resolve(dirname, 'app'), resolve: { extensions: ['.js', '.jsx'], //后缀名自动补全,可以使用jsx的文件后缀 modules: [ path.resolve(dirname, 'nodemodules') ] }, entry: './app.js', output: { path: path.resolve(dirname, 'dist'), filename: 'app.js', }, module: { rules: [ { test: /.(js|jsx)$/, exclude: /(nodemodules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'], } } }, { test: /index.html/, use: [{ loader: 'file-loader', options: { name (file) { return 'index.[ext]' } } }] } ] }, };
import React from 'react'; import Header from './Header'; import Content from './Content'; import Sidebar from './Sidebar'; class App extends React.Component { render() { return (
import React from 'react'; class Header extends React.Component { render() { return (
import React from 'react'; class Sidebar extends React.Component { render() { return (
import React from 'react'; class Content extends React.Component { render() { return (
import './index.html'; import React from 'react'; import ReactDom from 'react-dom'; import App from './component/App'; ReactDom.render(
webpack
//webpack-dev-server配置 devServer: { contentBase: './dist', historyApiFallback: true, inline: true,//源文件改变,会自动刷新页面 port: 1234,//设置默认监听端口,如果省略,默认为"8080" },
"scripts": { "start": "webpack-dev-server" },
npm start
html, body, /#root, .app { width: 100%; height: 100%; margin: 0; padding: 0; } div { box-sizing: border-box; } .header { position: fixed; top: 0; left: 150px; right: 0; padding: 0 30px; height: 61px; background: /#ebebeb; } .title { width: 90%; margin: 0 5%; height: 80px; line-height: 80px; color: /#fff; font-size: 20px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 150px; background: /#3d3c4a; } .header-con { position: relative; width: 100%; height: 60px; } .user { position: absolute; right: 0; top: 15px; height: 30px; line-height: 30px; color: gray; } .text { float: left; height: 30px; } .avatar { float: right; width: 30px; height: 30px; } .avatar img { width: 100%; height: 100%; border-radius: 90%; } .content { position: fixed; top: 60px; left: 150px; right: 0; bottom: 0; padding: 30px; color: gray; }
import React from 'react'; class Header extends React.Component { render() { return (
import React from 'react'; class Sidebar extends React.Component { render() { return (
... import '../style/app.css';
module: { rules: [ { test: /.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }], }, ] },
webpack
此时的css打包是自动添加到index的style标签里面
import React from 'react'; import Avatar from '../images/avatar.jpg'; class Header extends React.Component { render() { return (
module: { rules: [ { test: /./*.(gif|png|jpe?g|svg)$/, use: [{ loader: 'url-loader', options: { limit: 10000, name: 'images/[name].[ext]' } }, { loader: 'image-webpack-loader' }] }, ] },
npm install sass-loader node-sass --save-dev
module: { rules:[{ test: /.scss$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader', options: { sourceMap: true } }, { loader: 'sass-loader', options: { sourceMap: true, outputStyle: 'expanded', sourceMapContents: true } }] },] },
@import 'body'; @import 'header'; @import 'sidebar'; @import 'content';
.header { position: fixed; top: 0; left: 150px; right: 0; padding: 0 30px; height: 61px; background: /#ebebeb; .user { position: absolute; right: 0; top: 15px; height: 30px; line-height: 30px; color: gray; } .header-con { position: relative; width: 100%; height: 60px; } .text { float: left; height: 30px; } .avatar { float: right; width: 30px; height: 30px; img { width: 100%; height: 100%; border-radius: 90%; } } }
import '../style/app.css'; import '../style/app.scss';
webpack
npm install less less-loader --save-dev
module: { rules: [ { test: /.less$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader', options: { sourceMap: true } }, { loader: 'less-loader', options: { sourceMap: true, outputStyle: 'expanded', sourceMapContents: true, } }] }, ] },
antd-designnpm install antd --save npm install babel-plugin-import --save-dev
import 'antd/dist/antd.css' 或 import 'antd/dist/antd.less' @import "~antd/dist/antd.css";
import React from 'react'; import Table from 'antd/lib/Table'; class Content extends React.Component { render() { const columns = [{ title: '姓名', dataIndex: 'name', key: 'name', }, { title: '年龄', dataIndex: 'age', key: 'age', }, { title: '电话号码', dataIndex: 'number', key: 'number', }, { title: '邮箱', dataIndex: 'email', key: 'email', }]; const data = []; for (let i = 1; i < 15; i++) { let obj = { name: 'doudou', age: 32, number: 123456789, email: '123456789@163.com', }; obj.key = i; data.push(obj); } return (