这篇文章主要知识点是关于webpack2、react、开发配置、详解webpack2+React 实例demo 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书
更多Javascript相关的学习资源可以参阅 Javascript电子书 、 程序设计电子书 等栏目。
基于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 ) } };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。
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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。
以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到JS使用栈判断给定字符串是、 JS实现两个select下拉框选项、 javascript的写法总结、 等javascript文章进一步学习,感谢大家的阅读和支持。
展开 +
收起 -
Copyright 2018-2020 xz577.com 码农之家
电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路
鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)
版权投诉 / 书籍推广 / 赞助:520161757@qq.com
上传资源(网友、会员均可提供)
详解基于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 但更友好的……