网速比较慢的童鞋,装包时请准备好花生瓜子

webpack 本身只能打包 JavaScript 模块,但是它可以通过拓展打包比如静态资源文件、less、sass、typescript 等,还可以通过 babel 将 es6 转成 es5。

webpack 安装:

npm install --global webpack webpack-cli

  全局安装: npm install --global webpack

  本地安装: npm install --save-dev webpack

  检查安装: webpack --version

安装的时候建议安装到项目目录里,避免因为文件迁移后 webpack 的版本不一致导致问题

打包命令:

npm run build

Loading CSS 安装:

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

配置:

var path = require('path')

module.exports = {
entry: './src/main.js',
output: {
path: path.join(__dirname, './dist/'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /.css$/,
use: [ // 此处注意顺序问题
'style-loader',
'css-loader'
]
}
]
}
}

Loading Images 安装:

npm install --save-dev file-loader

配置:

module: {
rules: [
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.(jpg|png|gif|svg)$/,
use: [
'file-loader'
]
}
]
}

Loading Less 安装:( 注意此项依赖 css-loader 和 style-loader )

npm i -D less less-loader

配置:

module: {
rules: [
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}

Babel 安装:

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

配置:

module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}

babel-polyfill 安装:

npm i -D babel-polyfill

配置:

entry: ['babel-polyfill', './src/main.js'],

babel-transform-runtime 安装:

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

配置:

module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true, // 开启缓存
presets: ['env'],
plugins: ['transform-runtime']
}
}
},
]
}

其实总结起来,就是打开官方文档,装包,配置,测试

webpack 几个基本打包扩展项的安装命令的更多相关文章

  1. 继webpack后又一打包神器Parcel

    前言: 在继grunt.gulp实现自动化构建之后,webpack又引领前端打包潮流,众所周知的是,vue-cli的脚手架就是基于webpack进行项目打包的.而webpack还在上升的势头的时候,又 ...

  2. Vue+Webpack之 代码及打包优化

    本文重点介绍Vue单页面应用的优化手段: 异步加载 面切换时加loading特效 点击延迟 inline manifest 逻辑代码优化 依赖包体积优化 cdn引用 Vue代码优化 异步加载 所谓的异 ...

  3. Webpack - CommonJs & AMD 模块打包器

    Webpack 是一个 CommonJs & AMD 模块打包器.可以把你的 JavaScript 代码分离为多个包,在需要的时候进行加载,支持预处理文件,例如 json, jade, cof ...

  4. maven常用插件: 打包源码 / 跳过测试 / 单独打包依赖项

    一.指定编译文件的编码 maven-compile-plugin <plugin> <groupId>org.apache.maven.plugins</groupId& ...

  5. Webpack 2 视频教程 017 - Webpack 2 中分离打包项目代码与组件代码

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  6. webpack模块化管理和打包工具

    Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的 ...

  7. webpack分离css单独打包

    这篇文章过期了,webpack4.x已经不这么用了,最新的可以看这个地址webpack实战场景系列 原文地址:http://www.izhongxia.com/posts/44724.html CHA ...

  8. webpack多页面应用打包问题-新增页面打包JS影响旧有JS资源

    webpack多页面应用打包问题:如果在项目里新增页面,pages目录中插入一个页面文件,然后打包代码,在webpack3中,新增页面文件上方文件打包出来的JS文件内容全部会改变,点击查看比对,发现问 ...

  9. webpack提取图片文件打包压缩

    抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...

随机推荐

  1. mac上制作ubuntu引导盘

    https://help.ubuntu.com/community/How%20to%20install%20Ubuntu%20on%20MacBook%20using%20USB%20Stick h ...

  2. CareerCup All in One 题目汇总

    Chapter 1. Arrays and Strings 1.1 Unique Characters of a String 1.2 Reverse String 1.3 Permutation S ...

  3. poj1426_kuagnbin带你飞专题一

    Find The Multiple Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 30659   Accepted: 127 ...

  4. GetLastError获取到错误代码的含义

    在写win32的时候我们会用到GetLastError()函数来获取程序错误信息,那我们如何从返回的数字得到错误信息. 这里推荐一个博客,总结了所以返回数字的错误信息: http://blog.csd ...

  5. Number()、parseInt()和parseFloat()的区别

    JS中Number().parseInt()和parseFloat()的区别 三者的作用: Number(): 可以用于任何数据类型转换成数值: parseInt(): 函数可解析一个字符串,并返回一 ...

  6. TCP、UDP详解与抓包工具使用

    参考:https://www.cnblogs.com/HPAHPA/p/7737641.html TCP.UDP详解 1.传输层存在的必要性 由于网络层的分组传输是不可靠的,无法了解数据到达终点的时间 ...

  7. java Api 读取HDFS文件内容

    package dao; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.*; import java ...

  8. 微信sdk 图片上传 两种方法 上传一张显示一张 并附带微信图片放大功能和删除功能

    html <!--上传图片--> <div class="upload-mod"> <div class="up-box" id= ...

  9. [No000018D]Vim快速注释/取消注释多行的几种方法-Vim使用技巧(2)

    在使用Vim进行编程时,经常遇到需要快速注释或取消注释多行代码的场景,Vim教程网根据已有的教程介绍,总结了三种快速注释/取消注释多行代码的方法. 一.使用Vim可视化模式快速注释/取消注释多行 在V ...

  10. 图->有向无环图->拓扑排序

    文字描述 关于有向无环图的基础定义: 一个无环的有向图称为有向无环图,简称DAG图(directed acycline graph).DAG图是一类较有向树更一般的特殊有向图. 举个例子说明有向无环图 ...