基于webpack.config.js和babel.config.js及package.json构建项目的demo
时间:2019-12-07
本文章向大家介绍基于webpack.config.js和babel.config.js及package.json构建项目的demo,主要包括基于webpack.config.js和babel.config.js及package.json构建项目的demo使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
webpack.config.js的内容如下
const HtmlWebpackPlugin = require('html-webpack-plugin'); const Webpack = require("webpack"); const ConcatPlugin = require('webpack-concat-plugin'); const CopyPlugin = require('copy-webpack-plugin'); const Path = require('path'); const ImageInlineSizeLimit = 10000; module.exports = (env, argv) => { const isDev = 'development' === argv['mode']; return { entry: { init_global: './src/global.js', app: './src/app.js' }, module: { rules: [{ test: [/\.js$/, /\.jsx$/], exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.css|scss$/, //*.global.css->不开启css-loader modules loader: 'style-loader!css-loader!sass-loader' }, /*{ test: /^(?!.*\.global).*\.css/, //*.global.css->不开启css-loader modules loader: 'style-loader!css-loader?modules' }, { test: /^(.*\.global).*\.css/, //*.css->开启css-loader modules loader: 'style-loader!css-loader' },*/ { test: /\.xml$/, loader: 'raw-loader' }, { test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], loader: 'url-loader', options: { limit: ImageInlineSizeLimit, name: 'static/media/[name].[hash:8].[ext]', }, } ] }, resolve: { extensions: ['.js', '.jsx', '.css'], }, devServer: { contentBase: Path.join(__dirname, 'public'), }, devtool: "eval-source-map", plugins: [new HtmlWebpackPlugin({ filename: 'index.html', //按顺序引入 inject: false, template: 'src/assets/index.html' }), new ConcatPlugin({ uglify: !isDev, sourceMap: false, injectType: "none", name: 'editor', fileName: '[name].[hash:8].js', filesToConcat: [ 'mxgraph/javascript/mxClient.js', Path.resolve(__dirname, 'src/thirdparty/editor/sanitizer/sanitizer.min.js'), Path.resolve(__dirname, 'src/thirdparty/editor/js/Editor.js'), Path.resolve(__dirname, 'src/thirdparty/editor/js/EditorUi.js'), Path.resolve(__dirname, 'src/thirdparty/editor/js/Graph.js'), Path.resolve(__dirname, 'src/thirdparty/editor/js/Actions.js'), Path.resolve(__dirname, 'src/thirdparty/editor/js/Dialogs.js'), Path.resolve(__dirname, 'src/thirdparty/editor/js/Format.js'), Path.resolve(__dirname, 'src/thirdparty/editor/js/Menus.js'), Path.resolve(__dirname, 'src/thirdparty/editor/js/Shapes.js'), Path.resolve(__dirname, 'src/thirdparty/editor/js/Sidebar.js'), Path.resolve(__dirname, 'src/thirdparty/editor/js/Toolbar.js'), ] }), new CopyPlugin([{ from: Path.resolve(__dirname, 'public/static'), to: "static", toType: 'dir', }])] } };
babel.config.js的内容如下:
module.exports = { presets: [ ['@babel/preset-env', { targets: { node: 'current', }, }], '@babel/preset-react' ], plugins: [ "@babel/plugin-proposal-class-properties" ] };
package.json的依赖如下:
{ "name": "design-studio", "version": "1.0.0", "scripts": { "start": "webpack-dev-server --mode development", "build": "webpack --mode production" }, "devDependencies": { "@babel/cli": "7.6.0", "@babel/core": "7.6.0", "@babel/plugin-proposal-class-properties": "7.5.5", "@babel/preset-env": "7.6.0", "@babel/preset-react": "7.0.0", "babel-core": "6.26.3", "babel-loader": "8.0.6", "babel-plugin-transform-runtime": "6.23.0", "babel-preset-env": "1.7.0", "babel-preset-react": "6.24.1", "babel-preset-stage-0": "6.24.1", "copy-webpack-plugin": "5.0.4", "css-loader": "3.2.0", "file-loader": "4.2.0", "html-webpack-plugin": "3.2.0", "raw-loader": "3.1.0", "sass-loader": "8.0.0", "style-loader": "1.0.0", "url-loader": "2.1.0", "webpack": "4.40.2", "webpack-cli": "3.3.9", "webpack-concat-plugin": "3.0.0", "webpack-dev-server": "3.8.1", "node-sass": "^4.13.0" }, "dependencies": { "axios": "0.19.0", "bootstrap": "4.3.1", "mxgraph": "4.0.4", "react": "16.10.1", "react-dom": "16.10.1", "react-jsonschema-form": "1.8.0" } }
原文地址:https://www.cnblogs.com/jimaww/p/12003151.html
- React第三方组件3(状态管理之Flux的使用④TodoList下)
- React第三方组件3(状态管理之Flux的使用③TodoList中)
- Vue实现百度下拉提示搜索一、前期准备二、代码实现三、实现效果
- React第三方组件3(状态管理之Flux的使用②TodoList上)
- ggplot2玫瑰图案例——星巴克门店分布图
- React第三方组件3(状态管理之Flux的使用①简单使用)
- 用ggplot2画了一个我也叫不上名的炫酷图表
- React技巧8(不再手动绑定this,跟.bind(this)说88)
- 美美的商务范儿——ggplot2蝴蝶图
- 机器学习(三)使用Python和R语言从头开始理解和编写神经网络介绍目录神经网络背后的直观知识多层感知器及其基础知识什么是激活函数?前向传播,反向传播和训练次数(epochs)多层感知器全批量梯度下降
- React第三方组件2(状态管理之Refast的使用⑤LogicRender使用)
- 左右用R右手Python9——字符串合并与拆分
- hdu 1003 Max Sum(最大子窜和)
- React第三方组件2(状态管理之Refast的使用④中间件middleware使用)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 查找被删除但仍然占据磁盘的文件
- WPF 获取本机所有字体拿到每个字符的宽度和高度
- WPF 自己封装 Skia 差量绘制控件
- C# dotnet 使用 OpenXml 解析 Word 文件
- Day20:包含min函数的栈
- No module named ‘SerialClient‘和Cannot import package : rosserial_arduino
- 提升开发效率N倍的20+命令行神器!(附 demo)
- Java反射原理
- 【每日一题】46. Permutations
- 免费下论文的10个方法
- 【原创】90%的人都不会做的一道笔试题
- 这10道 Spring 常见面试题,你能搞定吗?
- 网工小白升级打怪篇(二)telnet实现远程管理
- (32)条件判断
- (33)if、case语句