webpack3+React 的配置全解


Posted in Javascript onAugust 21, 2017

webpack3 的配置相对于webpack2 又有了一些新的变化,这里讲其记录下来,备查 。

package.json 的完整文件在结尾 。

1. 安装

npm init
yarn add webpack webpack-dev-server -D

2. 配置简单输入输出

webpack.config.js

module.exports = {
 entry: {
  ventor: ['react', 'react-dom'],
  index: [
   'babel-polyfill',
   'react-hot-loader/patch',
   path.resolve(__dirname, "src/index.js")
  ]
 },
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: "js/[name].js",
 },
 devtool: 'source-map'

将所用到的库单独分离出来,在多页面应用中,对减少文件体积很有用 。

react-hot-loader 的3.0 版本的get start 刚刚更新 。 单独打包了补丁,所以react-hot-loader 作为一个生产依赖安装 。

这样基本的输入输出就完成了 。

3. webpack-dev-server

devServer: {
  hot: true, // 热重载
  inline: true, // 启用inline 模式
  port: 46480,
  contentBase: path.resolve(__dirname, "dist"),
  proxy: {
   "/api": {
     target: "xxxxx",
     secure: false, // 处理https
     changeOrigin: true,  // 跨域
   }
  }
 },

4. loaders

webpack 将所有的文件都当做js文件处理,所以配置加载器

4.1 安装loader

yarn add babel-loader less-loader postcss-loader css-loader style-loader -D
yarn add react-hot-loader

4.2 配置loader

注意,loader 中的 name 都是相对于 output中的path 的 。

postcss-loader是对css 文件做一些预处理,常用就是添加css3属性前缀,用到 autoprefixer 插件 。 配置postcss-loader ,需要 postcss.config.js 文件 。

babel-loader 需要配置option选项,这里单独提出去,放置到.babelrc 文件中 。

webpack.config.js

module: {
  rules: [{
    test: /.js$/,
    use: [
     "react-hot-loader/webpack",
     "babel-loader",
    ],
    exclude: path.resolve(__dirname, "node_modules")
   },
   {
    test: /\.css$/,
    use: [
     "style-loader",
     "css-loader",
     "postcss-loader"
    ]
   },
   {
    test: /\.less$/,
    use: [
     "style-loader",
     "css-loader",
     "postcss-loader",
     "less-loader"
    ]
   },
   {
    test: /\.(gif|png|jpe?g)$/,
    use: [{
     loader: "file-loader",
     options: {
      name: "static/img/[name].[ext]"
     }
    }]
   },
   {
    test: /\.(ttf|eot|svg|woff)(\?(\w|#)*)?$/,
    use: [{
     loader: "file-loader",
     options: {
      name: "static/font/[name].[ext]"
     }
    }]
   }
  ]
 },

.babelrc

{
 "presets": ["es2015", "stage-0", "react"],
 "plugins": ["transform-decorators-legacy"]
}

transform-decorators-legacy 这个插件用来转化es7 中的装饰器,比如 autobind,connect 等 。

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

5. 插件

插件是webpack 中非常重要的一部分 。

5.1 HtmlWebpackPlugin 插件 。

自动生成html文件,并自动引入script文件 。有几个页面就要new 几个插件, 自动引入同名的js文件。

const HtmlWebpackPlugin = require("html-webpack-plugin");
new HtmlWebpackPlugin({
 template: path.resolve(__dirname, "src/index.html"),
 name: "index",
 title: "webpack config cli",
 filename: "index.html",
 inject: true,
}),

5.2 CommonsChunkPlugin 插件将单独的部分作为chunk 提出去,减小文件体积,这里的name 要和 entry中对应 。

new webpack.optimize.CommonsChunkPlugin({
 name: 'vendor',
 filename: 'js/vendor.js'
}),

5.3 webpack 模块热替换插件 HotModuleReplacementPlugin

new webpack.HotModuleReplacementPlugin()

5.4 ExtractTextPlugin 分离css 文件

在这个插件加载以前,css 文件是放在js文件中,在解释js时,将文本插入到style节点中 。

使用这个插件以后,就直接可以单独分离css 文件 。

但是在开发环境中不要使用,会影响热重载的速度。

ExtractTextPlugin 的插件配置相对复杂 。首先包裹loaders,注意这里已经不能再使用style-loader了,因为提取css的任务插件完成了 。当提取失败时,使用style-loader 。

const ExtractTextPlugin = require("extract-text-webpack-plugin");
 // loader部分
   {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
     fallback: "style-loader",
     use: [
      "css-loader",
      "postcss-loader"
     ]
    })
   },
   {
    test: /\.less$/,
    use: ExtractTextPlugin.extract({
     fallback: "style-loader",
     use: [
      "css-loader",
      "postcss-loader",
      "less-loader"
     ]
    })
   }
 // 插件部分
  new ExtractTextPlugin({
   filename: "css/index.css"
  }),

6. 其他

extensions:用于省略后缀名

alias 处理别名 。

resolve: {
  extensions: [" ", ".js", ".jsx", ".css", ".less"],
  alias: {
   components: path.resolve(__dirname, 'src/components/'),
   css: path.resolve(__dirname, "src/css/"),
   model: path.resolve(__dirname, 'src/model/'),
   store: path.resolve(__dirname, 'src/store/')
  }
 }

7.package.json

{
 "name": "webpack-react-cli",
 "version": "1.0.0",
 "description": "",
 "main": "webpack.config.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack-dev-server --open",
  "build": "webpack -w"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "autoprefixer": "^7.1.2",
  "babel-core": "^6.25.0",
  "babel-loader": "^7.1.1",
  "babel-plugin-transform-decorators-legacy": "^1.3.4",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "babel-preset-stage-0": "^6.24.1",
  "css-loader": "^0.28.4",
  "extract-text-webpack-plugin": "^3.0.0",
  "file-loader": "^0.11.2",
  "html-webpack-plugin": "^2.30.1",
  "less": "^2.7.2",
  "less-loader": "^4.0.5",
  "postcss-loader": "^2.0.6",
  "style-loader": "^0.18.2",
  "webpack": "^3.0.0",
  "webpack-dev-server": "^2.5.0"
 },
 "dependencies": {
  "babel-polyfill": "^6.23.0",
  "core-decorators": "^0.19.0",
  "prop-types": "^15.5.10",
  "react": "^15.6.1",
  "react-dom": "^15.6.1",
  "react-hot-loader": "^3.0.0-beta.7"
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 #Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 #Javascript
Vue编写多地区选择组件
Aug 21 #Javascript
使用vue制作FullPage页面滚动效果
Aug 21 #Javascript
详解Layer弹出层样式
Aug 21 #Javascript
JS数组操作之增删改查的简单实现
Aug 21 #Javascript
JS实现评价的星星功能
Aug 20 #Javascript
You might like
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
PHP微信分享开发详解
2017/01/14 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
Python实现的购物车功能示例
2018/02/11 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
项目资料员岗位职责
2013/12/10 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
篮球赛口号
2014/06/18 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
工商行政处罚决定书
2015/06/24 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
python-for x in range的用法(注意要点、细节)
2021/05/10 Python