关于webpack2和模块打包的新手指南(小结)

webpack已成为现代Web开发中最重要的工具之一。它是一个用于JavaScript的模块打包工具,但是它也可以转换所有的前端资源,例如HTML和CSS,甚至是图片。它可以让你更好地控制应用程序所产生的HTTP请求数量、允许你使用其他资源的特性(例如Jade、Sass和ES6)。webpack还可以让你轻松地从npm下载包。

本文主要针对那些刚接触webpack的同学,将介绍初始设置和配置、模块、加载器、插件、代码分割和热模块替换。

在继续学习下面的内容之前需要确保你的电脑中已经安装了Node.js。

初始配置

使用npm初始化一个新项目并安装webpack:

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack@beta --save-dev
mkdir src
touch index.html src/app.js webpack.config.js

编写下面这些文件:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Hello webpack</title>
 </head>
 <body>
  <div id="root"></div>
  <script src="dist/bundle.js"></script>
 </body>
</html>
// src/app.js
const root = document.querySelector('#root')
root.innerHTML = `<p>Hello webpack.</p>`
// webpack.config.js
const webpack = require('webpack')
const path = require('path')

const config = {
 context: path.resolve(__dirname, 'src'),
 entry: './app.js',
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js'
 },
 module: {
  rules: [{
   test: /\.js$/,
   include: path.resolve(__dirname, 'src'),
   use: [{
    loader: 'babel-loader',
    options: {
     presets: [
      ['es2015', { modules: false }]
     ]
    }
   }]
  }]
 }
}

module.exports = config

上面的配置是一个普通的出发点,它通知webpack将入口文件src/app.js编译输出到文件/dist/bundle.js中、使用babel将所有的.js文件从ES2015转换成ES5。

为了让它可以转换到ES5格式的JS文件,我们需要安装三个包:babel-core、webpack加载器babel-loader和预置babel-preset-es2015。使用{ modules: false }Tree Shaking从打包文件中删除未使用的导出项(exports)以减少文件大小。

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

最后,用以下内容替换package.json的scripts部分:

"scripts": {
 "start": "webpack --watch",
 "build": "webpack -p"
},

在命令行中运行npm start将以监视模式启动webpack,当src目录中的.js文件更改时,它将重新编译bundle.js。控制台中的输出展示了打包文件的信息,注意打包文件的数量和大小十分重要。

现在当你在浏览器中加载index.html页面时会看到"Hello webpack."。

open index.html

打开dist/bundle.js文件看看webpack都做了哪些事情,顶部是webpack的模块引导代码,底部是我们的模块。到目前为止,你可能对于这个还没有一个深刻的印象。但是现在你可以开始编写ES6模块,webpack将生成适用于所有浏览器的打包文件。

使用Ctrl + C停止webpack,运行npm run build以生产模式编译我们的bundle.js

注意,打包文件的大小从2.61 kB减少到了585字节。再看一下dist/bundle.js文件,你会看到大量难懂的代码,因为我们使用UglifyJS压缩了它。这样的话,我们可以使用更少的代码达到与之前一样的效果。

模块

优秀的webpack知道如何使用各种格式的JavaScript模块,最著名的两个是:

  • ES2015 import语句
  • CommonJS require()语句

我们可以通过安装、导入lodash来测试这些格式的模块。

npm install lodash --save
// src/app.js
import {groupBy} from 'lodash/collection'

const people = [{
 manager: 'Jen',
 name: 'Bob'
}, {
 manager: 'Jen',
 name: 'Sue'
}, {
 manager: 'Bob',
 name: 'Shirley'
}, {
 manager: 'Bob',
 name: 'Terrence'
}]
const managerGroups = groupBy(people, 'manager')

const root = document.querySelector('#root')
root.innerHTML = `<pre>${JSON.stringify(managerGroups, null, 2)}</pre>`

运行npm start启动webpack并刷新index.html,你可以看到一个根据manager分组的数组。

让我们将这个数组转移到它自己的模块people.js中。

// src/people.js
const people = [{
 manager: 'Jen',
 name: 'Bob'
}, {
 manager: 'Jen',
 name: 'Sue'
}, {
 manager: 'Bob',
 name: 'Shirley'
}, {
 manager: 'Bob',
 name: 'Terrence'
}]

export default people

我们可以在app.js中使用相对路径轻松的导入它。

// src/app.js
import {groupBy} from 'lodash/collection'
import people from './people'

const managerGroups = groupBy(people, 'manager')

const root = document.querySelector('#root')
root.innerHTML = `<pre>${JSON.stringify(managerGroups, null, 2)}</pre>`

注意:像lodash/collection这样没有相对路径的导入是导入安装在/node_modules的模块,你自己的模块需要一个类似./people的相对路径,你可以以此区分它们。

加载器

我们已经介绍过,你可以通过配置像babel-loader这样的加载器来告诉webpack在遇到不同文件类型的导入时该怎么做。你可以将多个加载器组合在一起,应用到很多文件转换中。在JS中导入.sass文件是一个非常的例子。

Sass

这种转换涉及三个单独的加载器和node-sass库:

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

在配置文件中为.scss文件添加新规则。

// webpack.config.js
rules: [{
 test: /\.scss$/,
 use: [
  'style-loader',
  'css-loader',
  'sass-loader'
 ]
}, {
 // ...
}]

注意: 任何时候更改webpack.config.js中的任意一个加载规则都需要使用Ctrl + Cnpm start重新启动构建。

加载器序列以相反的顺序进行处理:

  • sass-loader 将Sass转换为CSS。
  • css-loader 将CSS解析为JavaScript并解析所有依赖。
  • style-loader将我们的CSS输出到文档中的

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-08-05

Vue项目webpack打包部署到服务器的实例详解

Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例. 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'

详解webpack+vue-cli项目打包技巧

1.设置config文件夹index.js中productionSourceMap的值为false,也就是设置webpack配置中devtool为false,打包后文件体积可以减少百分之八十!!!!!!! 2.如何实现打包文件中js.css等的版本控制? 设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true,即会使打包生成的index.html中的js和css路径带有?+随机字符串 以上就是本文的全部内容,希望对

Webpack打包慢问题的完美解决方法

前言 这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶,当然同时引入了 Webpack 作为打包工具.但是开发过程中遇到一个很棘手的问题就是,React 加上 React-Router.superagent.eventproxy 这些第三方轮子一共有好几百个 module,Webpack 的打包速度极慢.这对于开发是非常不好的体验,同时效率也极低. 问题分析 我们先来看一下完全没有任何优化的时候,Webpack 的打包速度(使用了jsx和babel的loader). 下面是我们

详解如何用webpack打包一个网站应用项目

本文介绍了如何用webpack打包一个网站应用,现在分享给大家,有需要的可以了解一下 随着前端技术的发展,越来越多新名词出现在我们眼前.angularjs.react.gulp.webpack.es6.babel--新技术出现,让我们了解了解用起来吧!今天我来介绍一下如何用webpack打包一个网页应用. 一般我们写页面,大概都是这样的结构: index.html css style.css js index.js ........... 这样我们的html里直接引用css和js,完成一个网页应

彻底解决 webpack 打包文件体积过大问题

webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如 HotModuleReplacementPlugin, NoErrorsPlugin... 这时候不管用什么优化方式,都没多大效果.所以,如果你打包后的文件非常大的话,先检查下是不是包含了

Webpack 服务器端代码打包的示例代码

环境变量 之前,我们在项目里会经常使用 process.env.NODE_ENV, 但这个变量对于 webpack打包是有影响的, 在 production 的时候是有优化的. 所以, 我们将改用其他的环境变量来区别: new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"', 'process.env.API_ENV': `"${process.env.API_ENV || 'development'

webpack独立打包和缓存处理详解

前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpack拆分.打包.压缩的使用方法.本文将在上篇文章的基础上进一步讲解在使用webpack构建的项目中存在的优化方案与解决方法. 上篇文章中写了一份webpack最基本的配置文件来打包压缩我们的代码: var path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js'

利用CDN加速react webpack打包后的文件详解

此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档. 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置): publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/" 打包 NODE_ENV=production node_modules/webpack/bin/webpack.js -

vue服务端渲染缓存应用详解

服务端渲染简介 服务端渲染不是一个新的技术:在 Web 最初的时候,页面就是通过服务端渲染来返回的,用 PHP 来说,通常是使用 Smarty 等模板写模板文件,然后 PHP 服务端框架将数据和模板渲染为页面返回,这样的服务端渲染有个缺点就是一旦要查看新的页面,就需要请求服务端,刷新页面. 但如今的前端,为了追求一些体验上的优化,通常整个渲染在浏览器端使用 JS 来完成,配合 history.pushState 等方式来做单页应用(SPA: Single-Page Application),也收

在 webpack 中使用 ECharts的实例详解

Webpack 是目前比较流行的模块打包工具,你可以在使用 webpack 的项目中轻松的引入和打包 ECharts,这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用. npm 安装 ECharts 在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package. 你可以使用如下命令通过 npm 安装 ECharts npm instal

webpack中的模式(mode)使用详解

模式(mode) 提供 mode 配置选项,告知 webpack 使用相应模式的内置优化. 用法 只在配置中提供 mode 选项: module.exports = { mode: 'production' }; 或者从 CLI 参数中传递: webpack --mode=production 支持以下字符串值: 1.development 会将 process.env.NODE_ENV 的值设为 development.启用 NamedChunksPlugin 和 NamedModulesPl

Docker 打包python的命令详解

最近用Python写了一段爬虫程序,为了隔离其运行环境,易于分发,把项目打包成Docker镜像 Dockerfile FROM python:2.7.12-alpine ADD ./src /job CMD ["python", "/job/main.py"] 构建命令 $ docker build -t job . 运行 $ docker run -d --name job job 比较简单 以上所述是小编给大家介绍的Docker 打包python的命令详解,希望

ASP.NET MVC中使用jQuery时的浏览器缓存问题详解

介绍 尽管jQuery在浏览器ajax调用的时候对缓存提供了很好的支持,还是有必要了解一下如何高效地使用http协议. 首先要做的事情是在服务器端支持HTTP GET,定义不同的URL输出不同的数据(MVC里对应的就是action).如果要使用同一个地址获取不同的数据,那就不对了,一个HTTP POST也不行因为POST不能被缓存.许多开发人员使用POST主要有2个原因:明确了数据不能被缓存,或者是避免JSON攻击(JSON返回数组的时候可以被入侵). 缓存解释 jQuery全局对象里的ajax

Spring 整合 Hibernate 时启用二级缓存实例详解

Spring 整合 Hibernate 时启用二级缓存实例详解 写在前面: 1. 本例使用 Hibernate3 + Spring3: 2. 本例的查询使用了 HibernateTemplate: 1. 导入 ehcache-x.x.x.jar 包: 2. 在 applicationContext.xml 文件中找到 sessionFactory 相应的配置信息并在设置 hibernateProperties 中添加如下代码: <!-- 配置使用查询缓存 --> <prop key=&q

C基础 redis缓存访问详解

引言 先说redis安装, 这里采用的环境是. Linux version 4.4.0-22-generic (buildd@lgw01-41) (gcc version 5.3.1 20160413 (Ubuntu 5.3.1-14ubuntu2) ) #40-Ubuntu SMP Thu May 12 22:03:46 UTC 2016 对于 ubuntu 安装 redis是非常简单的. 这里采用源码安装. 安装代码如下 wget http://download.redis.io/relea

JAVAEE Filter 过滤器设置是否缓存实例详解

在网页中,每次的客户端访问服务器,有部分不用重复请求,如有些图片,视频等就没有必要每次都请求,这样会让服务器增大工作量.为了防止这样,我们采用过滤器来设置客户端是都缓存. 页面的缓存与不缓存设置及html页面中meta的作用 HTTP1.1中启用Cache-Control 来控制页面的缓存与否,这里介绍几个常用的参数: no-cache,浏览器和缓存服务器都不应该缓存页面信息: public,浏览器和缓存服务器都可以缓存页面信息: no-store,请求和响应的信息都不应该被存储在对方的磁盘系统