码迷,mamicode.com
首页 > Web开发 > 详细

webpack-常用loader(二)

时间:2021-06-10 17:45:52      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:es6语法   node-sass   代码   bcf   使用   字节   nbsp   模块   特性   

1、安装vue

    npm install vue --save  

2、安装webpack与webpack-dev-server;(webpack-dev-server是一个小型的node.js express服务器)

   npm install webpack webpack-dev-server --save-dev

3、安装babel-core、babel-loader、babel-preset-es2015(1??babel-core的作用:如果某些代码需要调用Babel的API进行转码,就需要使用babel-core模块;2??babel-loader作用提示webpack需要对js代码进行兼容性编译;3??babel-preset-es2015的作用:将代码转化为ES5)

    npm install babel-core babel-loader babel-preset-es2015 --save-dev

4、安装vue-loader、vue-template-compiler(1??vue-loader作用解析.vue文件中require语法,2??vue-template-compiler的作用:解析.vue文件中template语法)

  npm install vue-loader vue-template-compiler --save-dev

5、安装 css-loader、style-loader(1??css-loader的作用:加载.css文件;2??style-loader的 作用:使用<style>将css-loader内部样式注入到我们的html页面)

  npm install css-loader style-loader --save-dev

6、安装url-loader、file-loader(两者都是用来打包文件和图片的,将引入的图片编码生成dataURL。url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURL,大于limit的还会使用file-loader进行copy)

  npm install url-loader file-loader --save-dev

7、安装sass-loader、node-sass(sass-loader用于编译sass,node-sass是sass-loader的依赖包)

  npm install sass-loader node-sass --save-dev

8、安装 vue-router (vue路由)

  npm install vue-router --save-dev

9、安装 vuex(vue全局状态管理)

  npm install vuex --save-dev

10、安装extract-text-webpack-plugin(作用为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象)

  npm install extract-text-webpack-plugin --save-dev

11、安装html-webpack-plugin (生成html模版文件)

  npm install html-webpack-plugin --save-dev

12、安装 babel-polyfill(解决一些浏览器不支持es6语法的问题)

  npm install babel-polyfill --save-dev

13、安装 babel-preset-env(功能:根据当前的运行环境来自动配置源码到当前环境可正常运行的代码的编译转换)

  npm install babel-preset-env --save-dev

14、安装babel-plugin-syntax-jsx(解析JSX语法)

  npm install babel-plugin-syntax-jsx --save-dev

15、 安装 babel-plugin-transform-vue-jsx(解析vue中jsx语法)

  npm install babel-plugin-transform-vue-jsx --save-dev

16、 安装 babel-plugin-transform-runtime(自动polyfill es5不支持的特性)

  npm install babel-plugin-transform-runtime --save-dev

17、安装 babel-preset-stage-2(对es6语法进行解读,其中支持syntax-trailing-function-commas、transform-object-reset-spread插件,第一插件的作用是增强代码的可读性和可修改性,第二个插件的作用对es6结构赋值的扩展)

  npm install babel-preset-stage-2 --save-dev

18、安装 babel-register(只会对require命令加载的文件转码,而不会对当前文件进行转码)

  npm install babel-register --save-dev

19、安装webpack-merge(webpack构建生产和开发环境分离)

  npm install webpack-merge --save-dev

20、安装cross-env(解决跨平台设置NODE_ENV(系统变量)的问题)

  npm install cross-env --save-dev

21、安装mint-ui (vue移动端组件库)

  npm install mint-ui --save-dev

22、安装layer-dialog(layer弹出层插件)

  npm install layer-dialog --save-dev

23、安装rimraf(以包的形式包装rm-rf命令,用来删除文件和文件夹)

  npm install rimraf --save-dev

24、安装jquery_lazyload(jQuery图片懒加载插件)

  npm install jquery_lazyload --save-dev

25、安装babel-preset-stage-3(支持es7 .babelrc文件中修改为"presets":["es2015","stage-3"])

  npm install babel-preset-stage-3 --save-dev

提示:项目中需要什么文件可以按照上面格式自行安装

webpack-常用loader(二)

标签:es6语法   node-sass   代码   bcf   使用   字节   nbsp   模块   特性   

原文地址:https://www.cnblogs.com/wuchen-wanou/p/14867925.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!