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中search()方法的使用
Jun 06 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
vue实现购物车选择功能
Jan 10 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 Javascript
JavaScript的一些小技巧分享
Jan 06 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
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
js实现导航跟随效果
2018/11/17 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
wxPython 入门教程
2008/10/07 Python
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
团队精神演讲稿
2013/12/31 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
护士自我鉴定总结
2014/03/24 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
实训报告范文大全
2014/11/04 职场文书
环境建议书
2015/02/04 职场文书