最近一段时间没有写react.js,发现webpack已经完全升级为2.0了,升级后导致以前的项目不能正常编译,只能重新实践一番

关于webpack2.0和1.x的区别概括起来就是tree shaking , es6, 一堆config文件不同的写法

tree shaking,简单描述就是就是真正意义上的按需打包,webpack1.0时代只要引入的包就打到合并的js文件中,即使是分包也无法处理那些没有使用的model,最后导致打包文件包括很多无用的内容,特别是SPA项目。

通过名叫 “tree-shaking” 的技术使打包的结果只包括实际用到的 exports。Three-shaking 的关键在于依赖 ES6 模块的静态结构。“静态结构”意味着在编译时他们是可分解的,而不用执行它们的任何代码,简单理解是ES6导出的部分如果在其它模块没有调用。

一.create项目

mkdir  project
type nul > package.json

  

二.安装webpack

npm install webpack --save-dev

三.安装css相关的loader

npm install style-loader css-loader  --save-dev

四.为了开发方便,安装webpack-dev-server

npm install --save-dev webpack-dev-server

  

五.为了方便编译,需要编译ES6语法和react语法,因为本例使用redux官网的一个列子中的代码,其中有地方用到stage0 stage2,所有还要引入这2个依赖

npm install --save-dev babel-core babel-loader babel-preset-es2015
npm install --save-dev babel-preset-react babel-preset-stage-0 babel-preset-stage-2

这里注意的是.bable文件配置格式从1.0迁移到2.0后变化很大,主要是.babelrc配置格式不同了

1.0可以这么配置,2.0如果这么配置将会报错

{
presets: ['es2015']
}

正确的配置 modules 表示是否转行为commonjs方式,这里选择false  loose 使编译后的代码不需要完全遵循ES6规定, 简化编译后的代码, 提高代码执行效率,这里可以不使用这个模式

{
"presets": [
["es2015", {"modules": false, "loose": true}],
"stage-0",
"stage-2",
"react"
]
}

 

六 react相关

npm install --save-dev react react-dom react-redux redux

  

 

七.其他有用的依赖

extract-text-webpack-plugin css分包用
html-webpack-plugin 文件js css引入替换模版用
npm install --save-dev path extract-text-webpack-plugin html-webpack-plugin

 

八.webpack文件

关于写法问题,最大的就是使用roles use语法,但是发现babel-loader使用官网介绍的use时候,无法编译语法,有兴趣的可以研究下为什么?

module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}  

官网推荐的使用babel-preset-env这个库,这个库可以制定编译支持什么浏览器,不过我使用后无法识别一些前沿的语法,只能弃用

最后找了个网上的用法,不使用use写法,配置.babelrc文件的写法。

开发环境

const path = require('path'); // 导入路径包
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {
devtool: 'eval-source-map', //开启sourceMap便于调试
entry: './src/index.js', //入口文件
output: {
path: path.resolve(__dirname, 'build'), // 指定打包之后的文件夹
filename: '[name].js' // 可以打包为多个文件
},
// 使用loader模块
module: {
rules: [{
test: /\.css$/,
use: [
'style-loader', {
loader: 'css-loader',
options: {
// modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
}
}
]
}, {
test: /\.(jsx$|js)$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/, //需要排除的目录
include: __dirname
}]
},
// 配置devServer各种参数
devServer: {
hot: true, // 配置HMR之后可以选择开启
historyApiFallback: true, // 不跳转
inline: true // 实时刷新
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html' // 模版文件
}),
new webpack.HotModuleReplacementPlugin() // 热加载插件
]
}

 

生产环境 

const path = require('path'); // 导入路径包
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanPlugin = require('clean-webpack-plugin')//webpack插件,用于清除目录文件 module.exports = {
entry: './src/index.js', //入口文件
output: {
path: path.resolve(__dirname, 'build'), // 指定打包之后的文件夹
filename: '[name]-[hash].js' // 可以打包为多个文件
},
// 使用loader模块
module: {
rules: [{
test: /\.css$/,
use: [
'style-loader', {
loader: 'css-loader',
options: { }
}
]
}, {
test: /\.(jsx$|js)$/,
loader: 'babel-loader', //此处不能用use,不知道为啥
exclude: /(node_modules|bower_components)/, //需要排除的目录
include: __dirname
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html' // 模版文件
}),
new CleanPlugin(['build']),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors' // 将公共模块提取,生成名为`vendors`的chunk
}),
new webpack.optimize.UglifyJsPlugin({ //压缩js代码
compress: {
warnings: false
}
}),
new ExtractTextPlugin('[name]-[hash].css'),
//定义环境变量production,定义后就不不把提示的东西打包进去
new webpack.DefinePlugin({
'process.env': {NODE_ENV: '"production"'}
})
]
}

  

 

例子的地址,仅供学习https://github.com/xiashan17/SPA-REDUX

  

  

使用webpack2.0 搭建react.js项目的更多相关文章

  1. [转载]Sublime Text 3 搭建 React.js 开发环境

    [转载]Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babe ...

  2. 使用Yarn+Webpack+Babel6搭建React.js环境

    使用Yarn+Webpack+Babel6搭建React.js环境 Facebook开源的React.js已经改变了世人对前端UI的思考方式.这种基于组件方式的优势之一,就是使View更加的简单,因为 ...

  3. vue-cli脚手架搭建Vue.js项目

    前提条件: 一.node.js 下载 https://nodejs.org/zh-cn/download/ 二.webpack 安装 npm install webpack -g   PS:-g 就是 ...

  4. Sublime Text 3 搭建 React.js 开发环境

    sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babel 支持ES6, React.js, jsx代码高亮,对 JavaScr ...

  5. Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

    [TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

  6. 如何利用webpack4.0搭建一个vue项目

    作为一个初学者,记录自己踩过的坑是个好的习惯.我本身比较懒,这里刚好有时间把自己的搭建过程记录一下这里是参考文章   https://www.jianshu.com/p/1fc5b5151abf文章里 ...

  7. 1.0搭建 Node.js 开发环境

    <搭建 Node.js 开发环境> 本课程假设大家都是在 Linux 或者 Mac 下面.至于使用 Windows 并坚持玩新技术的同学,我坚信他们一定有着过人的.甚至是不可告人的兼容性 ...

  8. Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目

    前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...

  9. 用yeoman搭建react画廊项目笔记

    1.安装yeoman   npm install yo -g yo --version //检测 yeoman版本,成功显示版本号,则安装成功 2.到yeoman官网 http://yeoman.io ...

随机推荐

  1. 【windows】dos命令查看某个文件夹下所有文件目录列表

    dos命令  dir展示一个目录中的文件夹和文件列表  /a代表显示隐藏目录

  2. 爆款AR游戏如何打造?网易杨鹏以《悠梦》为例详解前沿技术

    本文来自网易云社区. 7月31日,2018云创大会游戏论坛在杭州国际博览中心103B圆满举行.本场游戏论坛聚焦探讨了可能对游戏行业发展有重大推动的新技术.新实践,如AR.区块链.安全.大数据等. 网易 ...

  3. HttpRunnerManager接口自动化测试框架在win环境下搭建教程

    近几日一直在研究如何把接口自动化做的顺畅,目前用的是轻量级jmeter+ant+Jenkins自动化测试框架,目前测试界的主流是python语言,所以一直想用搭建一个基于python的HttpRunn ...

  4. java远程开关机

    最近,很多客户向我们反馈终端启动后异常的问题,因此,我自己做了一个远程开关的小工具,该工具的目的在于通过批量的方式来控制终端启动.其设计逻辑是通过服务端发送cmd指令 ,客户端接受并执行指令,把结果返 ...

  5. Struts2学习第4天--拦截器

    第1章     Struts2_day04笔记 1.1      上次课内容回顾 l  OGNL表达式 n  OGNL的概述 u  OGNL:对象图导航语言,是一门功能强大的表达式语言. n  OGN ...

  6. 包(package)

    一个文件夹管理多个模块文件,这个文件夹就被称为包,如下: 既然是多个模块文件,那么涉及多个模块怎么导入呢? ***当前路径下包之间模块导入: import wsg ***不同路径下包之间模块导入: f ...

  7. 【OCP|052】iZ0-052最新题库及答案整理-第9题

    9.Which is true about the Automatic Diagnostic Repository (ADR)? A) It includes diagnostic data for ...

  8. “全栈2019”Java第十八章:一元运算符

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  9. Windows下Oracle的下载与安装及配置

    一.Oracle下载 官网地址:http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html 百 ...

  10. leecode刷题(15)-- 验证回文字符串

    leecode刷题(15)-- 验证回文字符串 验证回文字符串 给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. 示例 ...