webpack 2的react开发配置详解
- 发布时间：
- 作者：码农之家
- 点击：157
这篇文章主要知识点是关于webpack2、react、开发配置、详解webpack2+React 实例demo 的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子书
webpack 2的react开发配置实例代码
基于webpack 2.3的标准语法，包含了less变量替换、React组件热加载、第三库单独输出、区分生产与开发环境等常用配置。
'use strict'
module.exports = function( env ) {
// 生成环境下webpack使用-p参数开启代码压缩
// webpack[-dev-server]使用--env dev参数指定编译环境
var isDev = env == 'dev';
var path = require( 'path' );
var webpack = require( 'webpack' );
var CleanWebpackPlugin = require( 'clean-webpack-plugin' );
var CopyWebpackPlugin = require( 'copy-webpack-plugin' );
var HtmlWebpackPlugin = require( 'html-webpack-plugin' );
var WebkitPrefixer = require( 'autoprefixer' );
var WebpackMd5Hash = require( 'webpack-md5-hash' );
var BundleAnalyzerPlugin = require( 'webpack-bundle-analyzer' ).BundleAnalyzerPlugin;
var sourcedir = path.resolve( __dirname, 'src' );// 源码和资源文件的放置位置
var outputdir = path.resolve( __dirname, 'build' );// 编译结果的放置位置
var webContextRoot = '/myreact/';// 应用的实际访问路径，默认是'/'
// antd的图标字体文件的实际访问路径，利用less-load的变量替换功能
var antd_fonticon = webContextRoot + 'assets/antd_fonticon/iconfont';
var hasValue = function( item ) { return item != null; };
return {
//context: path.resolve( __dirname ),
devtool: 'source-map',
devServer: {
host: '0.0.0.0',
port: 8082,
historyApiFallback: true
},
resolve: {
// 让less-loader等插件能找到以~相对定位的资源
modules: [sourcedir, 'node_modules']
},
entry: {
main: [
// 编译新版本js的新api(如Promise)，主要是让IE11能够执行编译后的代码
'babel-polyfill',
//使用react-hot-loader@3.0.0-beta.6，
// 搭配webpack-dev-server --hot命令实现react组件的hot reload
isDev ? 'react-hot-loader/patch' : null,
path.resolve( sourcedir, 'main.jsx' )].filter( hasValue ),
// 第三方库汇总输出
vendor: ['bootstrap/dist/css/bootstrap.min.css', 'react',
'react-dom', 'react-router', 'redux', 'react-redux',
'react-router-redux', 'moment', 'lodash', 'immutable', 'whatwg-fetch',
// 只含antd的js部分
'antd',
// 各控件还需引入各自的样式文件
'antd/lib/style/index.less']
},
output: {
path: outputdir,
filename: isDev ? 'js/[name].js' : 'js/[name]_[chunkhash:8].js',
// 使用require.ensure造成的延迟加载的代码文件
chunkFilename: isDev ? 'js/chunk_[id]_[name].js'
: 'js/chunk_[name]_[chunkhash:8].js',
publicPath: webContextRoot
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: [{
// 编译新版本js语法为低版本js语法
loader: 'babel-loader',
options: {
presets: [
// 编译es2015版本的js
['babel-preset-es2015', {
modules: false
}], 'babel-preset-stage-2',
// 编译jsx
'babel-preset-react'],
plugins: [// 支持热加载react组件
isDev ? 'react-hot-loader/babel' : null,
// 减少重复的编译后的辅助方法
'babel-plugin-transform-runtime',
// 按需加载组件的代码和样式
['babel-plugin-import', {
libraryName: 'antd',
style: true
}]].filter( hasValue )
}
}]
}, {
test: /\.css$/,
use: ['style-loader',
{
loader: 'css-loader',
options: {
// 第三方组件未以module方式引入css，所以不能在全局开启css module
modules: false
}
},
{ loader: 'postcss-loader', options: { plugins: [WebkitPrefixer] } }]
}, {
test: /\.less$/,
use: ['style-loader',
{
loader: 'css-loader',
options: {
modules: false
}
},
{ loader: 'postcss-loader', options: { plugins: [WebkitPrefixer] } },
{
loader: 'less-loader',
options: {
modules: false,
modifyVars: {
// 替换antd用到的字体文件路径
"icon-url": JSON.stringify( antd_fonticon )
}
}
}]
}, {
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
// 编码为dataUrl的最大尺寸
limit: 10000,
// 输出路径，相对于publicPath
outputPath: 'assets/',
name: isDev ? '[name].[ext]' : '[name]_[hash:8].[ext]'
}
}
}, {
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff',
outputPath: 'assets/',
name: isDev ? '[name].[ext]' : '[name]_[hash:8].[ext]'
}
}
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/octet-stream',
outputPath: 'assets/',
name: isDev ? '[name].[ext]' : '[name]_[hash:8].[ext]'
}
}
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/vnd.ms-fontobject',
outputPath: 'assets/',
name: isDev ? '[name].[ext]' : '[name]_[hash:8].[ext]'
}
}
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/svg+xml',
outputPath: 'assets/',
name: isDev ? '[name].[ext]' : '[name]_[hash:8].[ext]'
}
}
}]
},
plugins: [
// momentjs包含大量本地化代码，需筛选
new webpack.ContextReplacementPlugin( /moment[\/\\]locale$/, /en-ca|zh-cn/ ),
new webpack.optimize.OccurrenceOrderPlugin( true ),
// 复制无需编译的文件至输出目录
new CopyWebpackPlugin( [{
from: path.resolve( sourcedir, 'assets' ),
to: 'assets'
}] ),
// 修复webpack的chunkhash不以chunk文件实际内容为准的问题
new WebpackMd5Hash(),
// 单独打包输出第三方组件，和webpack生成的运行时代码
new webpack.optimize.CommonsChunkPlugin( {
name: ['vendor', 'manifest']
}),
// 自动填充js、css引用进首页
new HtmlWebpackPlugin( {
title: 'wzp react',
template: path.resolve( sourcedir, 'index.html' ),
inject: 'body' // Inject all scripts into the body
}),
// 设置环境变量
new webpack.DefinePlugin( {
process: {
env: {
// process.env.NODE_ENV==="production"
// 应用代码里，可凭此判断是否运行在生产环境
NODE_ENV: isDev ? JSON.stringify( 'development' )
: JSON.stringify( 'production' )
}
}
}),
// print more readable module names on HMR updates
isDev ? new webpack.NamedModulesPlugin() : null,
// 先清理输出目录
isDev ? null : new CleanWebpackPlugin( [outputdir] ),
// 排除特定库
isDev ? null : new webpack.IgnorePlugin( /.*/, /react-hot-loader$/ ),
// 输出报告，查看第三方库的大小
isDev ? null : new BundleAnalyzerPlugin(
{
analyzerMode: 'static',
reportFilename: 'report.html',
openAnalyzer: true,
generateStatsFile: false
})
].filter( hasValue )
}
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。
详解webpack2+React 实例demo
1.目录结构
源文件在src目录下，打包后的文件在dist目录下。
2.webpack.config.js
说明：
1.涉及到的插件需要npm install安装；
2.html-webpack-plugin创建服务于 webpack bundle 的 HTML 文件；
3.clean-webpack-plugin清除dist目录重复的文件；
4.extract-text-webpack-plugin分离css文件。
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var config = {
context: path.resolve(__dirname, './src'),
entry: {
app: './main.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].bundle.js'
},
devtool: 'cheap-module-eval-source-map',
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader","postcss-loader"]
})
},
{
test: /\.less$/,
use: ["style-loader","css-loader","less-loader"]
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
options: {
limit: 8129
}
}
]
},
devServer:{
historyApiFallback: true,
host:'0.0.0.0',
hot: true, //HMR模式
inline: true,//实时刷新
port: 8181 // 修改端口，一般默认是8080
},
resolve: {
extensions: ['.js', '.jsx', '.css'],
modules: [path.resolve(__dirname, './src'), 'node_modules']
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new UglifyJsPlugin({
sourceMap: true
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: true
}),
new HtmlWebpackPlugin({
template:'./templateIndex.html'
}),
new ExtractTextPlugin({
filename: '[name].[hash].css',
disable: false,
allChunks: true,
}),
new CleanWebpackPlugin(['dist'])
],
}
module.exports = config;
// webpack里面配置的bundle.js需要手动打包才会变化,目录可以由自己指定;
// webpack-dev-server自动检测变化自动打包的是开发环境下的bundle.js,打包路径由contentBase决定,两个文件是不一样的.
3.postcss.config.js(Autoprefixer)
module.exports = {
plugins: {
'autoprefixer': {browsers: 'last 5 version'}
}
}
// 兼容最新的5个浏览器版本
4.新建.babelrc
{
"presets": ['es2015','react','stage-3']
}
5.index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>React Project</title> </head> <body> <div id="content"></div> <script src="app.bundle.js"></script> </body> </html>
6.package.json
npm install 或 yarn -> 安装模块，npm run build -> 打包，npm start -> 启动localhost:8181
{
"name": "reactproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"jquery": "^3.1.1",
"react": "^15.3.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-plugin-syntax-async-functions": "^6.13.0",
"babel-plugin-transform-async-to-generator": "^6.16.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-3": "^6.17.0",
"bootstrap": "^4.0.0-alpha.2",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.25.0",
"extract-text-webpack-plugin": "^3.0.0-rc.2",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.29.0",
"jshint": "^2.9.3",
"jshint-loader": "^0.8.3",
"json-loader": "^0.5.4",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"moment": "^2.15.1",
"node-sass": "^3.10.0",
"postcss-loader": "^2.0.6",
"react-bootstrap": "^0.30.5",
"react-dom": "^15.3.2",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.5.1"
},
"scripts": {
"start": "webpack-dev-server --hot --inline --progress --colors --content-base .",
"build": "webpack --progress --colors"
},
"keywords": [
"reactcode"
],
"author": "xhh",
"license": "ISC"
}
7.main.js:入口文件
import React from 'react'
import { render } from 'react-dom';
import $ from 'jquery';
import Demo1 from './js/demo1.js';
// import Demo2 from './js/demo2.js';
render(<Demo1 title="这是提示" />, $('#content')[0]);
// render(<Demo2 myName="园中桥" sex="female"/>, $('#content')[0]);
8.templateIndex.html
打包后的模板index文件，插件html-webpack-plugin的template指定的目录。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Template Index html</title> </head> <body> <div id="content"></div> </body> </html>
9.demo
demo1.js
import React from 'react';
import '../css/demo1.css';
const arr = [
{
name:'name1',
tel:'12343456783'
},
{
name:'name2',
tel:'12343456784'
},
{
name:'name3',
tel:'12343456785'
}
];
export default class Demo1 extends React.Component {
constructor(props) {
super(props);
this.state = {
content: true,
value: 'inputText'
};
}
handleClick(){
this.setState({
content: !this.state.content
})
// this.refs.myInput.focus();
}
handleChange(event) {
this.setState({value: event.target.value});
}
renderArr() {
return arr.map((item,index)=>{
return <li key={index}>name:{item.name},tel:{item.tel}</li>
})
}
render(){
let btnStyle = {
border: '1px solid #ccc',
background:'#fff',
color: '#a106ce'
}
return (
/* 注释 */
<div>
<button style={btnStyle} className="btn" type="button" onClick={()=>this.handleClick()}>change state</button><br/>
<p title={this.props.title} style={{ color:'#A349A4' }}>Hello { this.props.textCont}!</p>
<p>{this.state.content ? 'initial value' : 'later value'}</p>
{ /* 标签里面的注释外面要用花括号 */ }
<input type="text" value={this.state.value} ref="myInput" onChange={this.handleChange.bind(this)} />
<h4>{this.state.value}</h4>
<DemoChild><p>lalala</p></DemoChild>
<ul>
{ this.renderArr() }
</ul>
</div>
)
}
}
Demo1.propTypes = {
title: React.PropTypes.string.isRequired
}
Demo1.defaultProps = {
textCont: 'React'
}
class DemoChild extends React.Component {
constructor(props) {
super(props);
}
render(){
return (
<div>我是子组件{this.props.children}</div>
)
}
}
demo1.css
ul {
list-style: none;
padding: 0;
margin:0;
display: flex;
}
.btn:focus {
outline: none;
}
demo2.js:父子组件生命周期
import React, { Component, PropTypes } from 'react';
import '../css/demo2.css';
export default class Demo2 extends Component {
constructor(props){
super(props);
this.state = {
stateName: this.props.myName + ',你好',
count: 0,
}
console.log('init-constructor');
}
static get defaultProps() {
return {
myName: "xhh",
age: 25
}
}
doUpdateCount(){
this.setState({
count: this.state.count+1
})
}
componentWillMount() {
console.log('componentWillMount');
}
componentDidMount() {
console.log('componentDidMount')
}
componentWillReceiveProps(nextProps){
console.log('componentWillReceiveProps')
}
shouldComponentUpdate(nextProps, nextState){
console.log('shouldComponentUpdate');
// return nextProps.id !== this.props.id;
if(nextState.count > 10) return false;
return true;
}
componentWillUpdate(nextProps,nextState){
console.log('componentWillUpdate');
}
componentDidUpdate(prevProps, prevState){
console.log('componentDidUpdate');
}
componentWillUnmount(){
console.log('componentWillUnmount');
}
render(){
console.log('render');
return (
<div>
<p className="colorStyle">姓名：{this.props.myName}</p>
<p>问候：{this.state.stateName}</p>
<p>年龄：{this.props.age}</p>
<p>性别：{this.props.sex}</p>
<p>父元素计数是:{this.state.count}</p>
<button onClick={ this.doUpdateCount.bind(this) } style={{ padding: 5,backgroundColor: '#ccc' }}>点我开始计数</button>
<SubMyPropType count1={this.state.count} />
</div>
)
}
}
Demo2.propTypes = {
myName: PropTypes.string,
age: PropTypes.number,
sex: PropTypes.string.isRequired
}
class SubMyPropType extends Component {
componentWillMount() {
console.log('subMyPropType-componentWillMount');
}
componentDidMount() {
console.log('subMyPropType-componentDidMount')
}
componentWillReceiveProps(nextProps){
console.log('subMyPropType-componentWillReceiveProps')
}
shouldComponentUpdate(nextProps, nextState){
console.log('subMyPropType-shouldComponentUpdate');
if(nextProps.count1 > 5) return false;
return true;
}
componentWillUpdate(nextProps, nextState){
console.log('subMyPropType-componentWillUpdate');
}
componentDidUpdate(prevProps, prevState){
console.log('subMyPropType-componentDidUpdate');
}
componentWillUnmount(){
console.log('subMyPropType-componentWillUnmount');
}
render(){
console.log('subMyPropType-render');
return(
<p>子元素计数是:{this.props.count1}</p>
)
}
}
demo2.css
.colorStyle {
color: #0f0;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。
以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。
相关电子书
学习笔记
<
1
>
详解基于webpack2.x的vue2.x的多页面站点
本文介绍了基于webpack2.x的vue2.x的多页面站点，分享给大家，具体如下： vue的多页面 依旧使用 vue-cli 来初始化我们的项目 然后修改主要目录结构如下： ├── build│ ├── build.js│ ├── check-versions.js│ ├── dev-client.js│ ├── dev-server.js│ ├── utils.js│ ├── vue-loader.conf.js│ ├── webpack.base.conf.js│ ├── webpack.dev.conf.js│ └── webpack.prod.conf.js├── src│ ├── pages│ │ ├── boys│ │ │ ├── index.html│ │ │ ├── index.js│ │ │ └── index.vue│ │ ├── goods│ │ │ ├── index.html│ │ │ ├── index.js│ │ │ └── index.vue│ │ ├── index│ │ │ ├── index.html│ │ │ ├── index.js│ │ │ └── index.vue│ │ └── sotho│ │ ├── index.html│ │ ├── index.js│ │ └── index.vue 编写每个页面 可以看到这里我们……
vue-cli webpack2项目打包优化分享
减小文件搜索范围 配置 resolve.modules Webpack的resolve.modules配置模块库（即 node_modules）所在的位置，在 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时，会去 node_modules 目录下找。但是默认的配置，会采用向上递归搜索的方式去寻找，但通常项目目录里只有一个node_modules，且是在项目根目录，为了减少搜索范围，可以直接写明 node_modules 的全路径；同样，对于别名(`alias)的配置，亦当如此： function resolve (dir) { return path.join(__dirname, '..', dir)}module.exports = { resolve: { extensions: ['.js', '.vue', '.json'], modules: [ resolve('src'), resolve('node_modules') ], alias: { 'vue$': 'vue/dist/vue.common.js', 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components'), // ... 'store': resolve('src/store') } }, ...} 合理设置 test exclude test：必须满足的条件（正则表达式，不要加引号，匹配……
关于webpack2和模块打包的新手指南（小结）
webpack已成为现代Web开发中最重要的工具之一。它是一个用于JavaScript的模块打包工具，但是它也可以转换所有的前端资源，例如HTML和CSS，甚至是图片。它可以让你更好地控制应用程序所产生的HTTP请求数量、允许你使用其他资源的特性（例如Jade、Sass和ES6）。webpack还可以让你轻松地从npm下载包。 本文主要针对那些刚接触webpack的同学，将介绍初始设置和配置、模块、加载器、插件、代码分割和热模块替换。 在继续学习下面的内容之前需要确保你的电脑中已经安装了Node.js。 初始配置 使用npm初始化一个新项目并安装webpack： mkdir webpack-democd webpack-demonpm init -ynpm install webpack@beta --save-devmkdir srctouch index.html src/app.js webpack.config.js 编写下面这些文件： !-- index.html --!DOCTYPE htmlhtml lang="en" head meta charset="utf-8" titleHello webpack/title /head body div id="root"/div script src="dist/bun……
vue 系列——vue2-webpack2框架搭建踩坑之路
react、vue、angular代表了3种前端工程化的思想，学习三大框架主要是理解它们的核心概念，比如组件、生命周期、单向数据流、双向绑定等。这些概念在非框架开发中，很少人会去这样系统化的思考，对于新手来说，很多概念都没有接触过，不知道从何入手一个react、vue或者是angular项目，下面我将会从零搭建vue项目，边做项目边学习vue的思想。 1、想要使用vue，我首先该怎么做？ 想要学习vue，我第一件事是去vue官网看简介：https://cn.vuejs.org/v2/guide... ，仔细一看，vue现在有1.X和2.X的区别，很好，我果断选择2.X。 选中了vue版本，我上知乎搜索了vue框架搭建的方式，看了前辈的各种分享，了解到一个叫做 cooking 的好玩意，好在哪里？ cooking 的目标是将你从繁琐的构建配置中解放出来，同时还省去每个项目都要安装一堆开发依赖的麻烦。基于 webapck 但更友好的……