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 CSS 修改学习第四章 透明度设置
Feb 19 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
javascript变量声明实例分析
Apr 25 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
js实现楼层导航功能
Feb 23 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 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
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
Python实现抓取网页并且解析的实例
2014/09/20 Python
为Python的web框架编写前端模版的教程
2015/04/30 Python
django批量导入xml数据
2016/10/16 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
python属于软件吗
2020/06/18 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
自动化职业生涯规划书范文
2014/01/03 职场文书
高二地理教学反思
2014/01/24 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
理财计划书
2014/08/14 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
民政局未婚证明
2015/06/15 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书