webpack简单应用
2018-03-05 15:28
423 查看
安装 ``` npm install webpack --save -dev yarn add webpack --dev ``` ### 编译ES6 > ES5 安装 ``` npm install babel --save-dev npm install babel-core --save-dev npm install babel-loader --save-dev yarn add babel --dev yarn add babel-core --dev yarn add babel-loader --dev ``` ### 识别es2015 ``` npm install babel-preset-es2015 --save-dev yarn add babel-preset-es2015 --dev ``` ###配置一下语法编译 .babelrc 文件 ``` { "presets": ["es2015"]} ``` ###解析ES7 ``` stage-0; 范围更大 stage-1; stage-2; stage-3; stage-4; 范围最小 npm install babel-perset-stage-0 --save-dev yarn add babel-preset-stage-0 --dev ``` ### 解析css 安装 ``` //编译css的 npm install css-loader --save-dev //构造一个style标签将编译后的css 放进来 npm install style-loader --save-dev ``` ### 解析css的预处理 - less - sass - stylus ``` npm install less --save-dev npm install less-loader --save-dev ``` ### 解析图片 ``` npm install file-loader --save-dev npm install url-loader --save-dev (依赖上面的) ``` ### 安装解析html插件 以我们自己写的html作为模板 再把打包后的js引入到 html中生成一个新的html文件(在dist文夹下) 上线使用的 ``` npm install html-webpack-plugin --save-dev ``` ### webpack开发服务 安装 在内存中打包不会显示dist ``` npm install webpack-dev-server --save-dev ```
相关文章推荐
- webpack的最简单应用,只使用js与css的打包
- Gulp-webpack简单应用
- webpack搭建简单的多页面应用
- webpack+Vue.js+vue-router的一个简单实例应用
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
- webpack的最简单应用,只使用js与css的打包
- 【前后不分离之】vue+elementui+webpack+springboot 单页面 应用
- vue-cli+webpack实现多页面应用的配置
- Electron+React+Webpack+Vscode应用桌面开发平台搭建
- 详解webpack-dev-server的简单使用
- 开发一个简单的web应用定时任务
- 基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]
- VUe+webpack构建单页router应用(一)
- webpack 入门一篇足够,简单而又详细入门
- WEB应用之:JS className 的简单操作
- 利用免费cdn加速webpack单页应用
- 创建一个yii web应用,是件非常简单的事
- webpack简单配置