webpack+ES6+less开发环境搭建(附带视频教程)
来源:互联网 发布:c语言数组最大长度 编辑:程序博客网 时间:2024/06/01 07:11
webpack是什么https://cnodejs.org/topic/571f4e785a26c4a841ecbd7c
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
百度网盘视频下载:http://pan.baidu.com/s/1jIPJucu百度网盘在线观看:http://pan.baidu.com/share/link?shareid=1645979812&uk=2469628767&fid=988128759555711
基本命令
webpack // 最基本的启动webpack的方法 webpack -w // 提供watch方法;实时进行打包更新 webpack -p // 对打包后的文件进行压缩 webpack -d // 提供source map,方便调式代码
全局安装
# npm install webpack -g 项目安装: # 进入项目目录 # 确定已经有 package.json,没有就通过 npm init 创建 # 安装 webpack 依赖 # npm install webpack --save-dev
使用ES6
安装 babel-loader: # npm install babel-loader --save-dev安装转码规则: # npm install babel-preset-es2015 --save-devES7不同阶段语法提案的转码规则(共有4个阶段),选装一个# npm install --save-dev babel-preset-stage-0# npm install --save-dev babel-preset-stage-1# npm install --save-dev babel-preset-stage-2# npm install --save-dev babel-preset-stage-3参考格式:{test: /\.js$/,loader: 'babel?presets[]=es2015,presets[]=stage-0'}
编译css
安装css-loader: # npm install css-loader --save-dev安装style-loader # npm install style-loader --save-dev参考格式:{test: /\.css$/,loaders: ['style', 'css', 'autoprefixer']}
编译less
# npm install less --save-dev安装less-loader: # npm install less-loader --save-dev参考格式:{test: /\.less/,loaders: ['style', 'css', 'autoprefixer', 'less'],}
使用autoprefixer自动补上浏览器兼容
# npm install autoprefixer-loader --save-dev参考格式:{test: /\.css$/,loaders: ['style', 'css', 'autoprefixer']}, {test: /\.less/,loaders: ['style', 'css', 'autoprefixer', 'less'],}
编译文件
安装file-loader: # npm install file-loader --save-dev参考格式:{test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,loader: 'file-loader?name=[hash].[ext]'}
编译图片
# npm install url-loader --save-dev 参考格式: { test: /\.(png|jpg)$/, loader: 'url?limit=1200&name=[hash].[ext]' }
编译JSX
# npm install jsx-loader --save-dev # npm install babel-preset-react --save-dev 参考格式: { test: /\.jsx$/, loaders: ['jsx', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react'] }
示例源码
在项目目录下,新建一个webpack.config.js文件,把下面代码复制进去,然后在新建一个app.js和index.js文件,写上console.log('你好世界');执行命令:webpack 然后找到build目录就看到编译后的文件了 var webpack = require('webpack'); module.exports = { entry: { app: './app', //编译的入口文件 index: './index', //编译的入口文件 }, output: { publicPath: '/build/', //服务器根路径 path: './build', //编译到当前目录 filename: '[name].js' //编译后的文件名字 }, module: { loaders: [{ test: /\.js$/, loader: 'babel?presets=es2015' }, { test: /\.css$/, loaders: ['style', 'css', 'autoprefixer'] }, { test: /\.less/, loaders: ['style', 'css', 'autoprefixer', 'less'], }, { test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/, loader: 'file-loader?name=[hash].[ext]' }, { test: /\.(png|jpg)$/, loader: 'url?limit=1200&name=[hash].[ext]' //注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图片 } ] }, plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js') //将公用模块,打包进common.js ], resolve: { extensions: ['', '.js', '.jsx'] //后缀名自动补全 } };
0 0
- webpack+ES6+less开发环境搭建(附带视频教程)
- webpack+ES6+less开发环境搭建(附带视频教程)
- webpack+ES6+less开发环境搭建(附带视频教程)
- webpack+ES6+less开发环境搭建
- webpack手动搭建 es6+less 开发环境和打包
- webpack教程,webpack+ES6+less视频教程
- webpack+ES6+react搭建简单开发环境
- 使用webpack搭建react ES6开发环境
- 搭建es6+react开发环境---webpack
- webpack搭建ES6环境
- 利用webpack搭建es6环境
- react + webpack + ES6 环境搭建
- React系列1-飞速搭建React+ES6+Webpack开发环境
- 关于ES6+React+webpack的环境搭建
- webpack+babel+es6+react环境搭建
- Webpack 开发环境搭建
- React+Webpack+ES6组合开发环境部署
- WEBPACK+REACT开发环境搭建
- HDU 2594 Simpsons’ Hidden Talents
- ROS Learning-011 beginner_Tutorials (编程) 编写 ROS 话题版的 Hello World 程序(Python版)
- java基础高级特性
- Android蓝牙编程 之 同时打开SPP和音频A2DP服务
- 小机房服务器最后的战役 - vSphere管理平台部署
- webpack+ES6+less开发环境搭建(附带视频教程)
- 浅谈面向对象与面向过程的区别
- Java实现插入排序算法
- 坚持#第30天~JAVA环境配置
- for循环及数组
- CCF——最优配餐
- 找到list中差距为k的数值对
- Windows 10上修改Python 3.5的server.py,使得其http server脚本可以正确处理中文目录文件名
- 在HTML代码中做SEO