webpack从零开始第1课:安装webpack和webpack-dev-server
原文地址：https://segmentfault.com/a/1190000012536871
webpack目录
本文参考文档
- webpack官方安装文档 https://webpack.js.org/guides...中文翻译
- webpack-dev-server官方安装文档: https://webpack.js.org/guides...
- package.json官方详解: https://docs.npmjs.com/files/...
- webpack命令行各参数的用法: https://webpack.js.org/api/cli/中文翻译
- webpack-dev-server的配置 https://webpack.js.org/config...中文翻译
- 官方插件列表插件中文翻译html-webpack-plugin插件托管地址和用法html-loader托管地址和用法file-loader托管地址和用法
- 官方网站1官方网站2官方文档官方教程中文版本文档
前提条件
- 电脑装了一个全新的nodejs，最好是LTS版本,旧的nodejs版本可能没使用webpack的新功能，也可能会丢失一些依赖的包
- 先安装好淘宝的cnpm，淘宝镜像方便些
- 我的安装环境是win10
1.准备工作
- 新建项目文件夹
D:\03www2018\study\webpack2017下面简写为根目录 - 新建npm配置文件package.josn,
根目录>cnpm init
2.项目局部安装webpack和webpack-dev-server
- 不建议全局安装webpack和webpack-dev-server
- 局部安装webpack
根目录>cnpm i webpack -D - 局部安装server
根目录>cnpm i webpack-dev-server -D - 会自动生成node_modules文件夹,下有804个文件夹(485+319server)个文件夹，这些包都是webpack的依赖
- package.json中增加了刚安装的包webpack的配置
"devDependencies": {
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}说明1: devDependencies是开发依赖，只会在打包过程中用到，不会包含到最后的代码中说明2: 如果想安装指定版本的webpack，使用npm install --save-dev webpack@<版本号>格式
3.熟悉webpack命令行各参数的意思
- 有关命令行各参数的用法，
根目录>"node_modules/.bin/webpack" -h - 上面这个执行webpack很不方便，修改
根目录>package.json，在script加上两条
"scripts": {
"a" :"webpack --config ./build/webpack.dev.conf.js",
"b" :"webpack-dev-server --config ./build/webpack.dev.conf.js",
"test": "echo \"Error: no test specified\" && exit 1"
},- 命令行的选项其实都可以写在配置文件webpack.config.js中，写在配置文件中更方便更强大。webpack启动时要读取配置文件，参数--config指定读取哪个配置文件，如果没有使用--config指定，会默认在
根目录中找webpack.config.js或webpackfile.js这个文件,有关配置文件的命名随意定，但最好带上环境，如webpack.base|dev|prod.conf.js
01: 配置选项 Config options:
--config 配置文件路径，字符串格式，默认是`根目录`下的 webpack.config.js 或 webpackfile.js，
--config-name 使用配置的名字，字符串
--env 当配置文件输出的是一个函数时，要指定，在下一节课中会介绍
02: 基本选项 Basic options:
--context 入口文件根目录，默认为当前目录
--entry 入口文件,这里只能是字符串，但在配置文件中还可以定义数组或对象
--watch, -w 监视是否有文件有改动，会自动打包，默认为false
--debug Switch loaders to debug mode [boolean]
--devtool Enable devtool for better debugging experience (Example:
--devtool eval-cheap-module-source-map) [string]
-d shortcut for --debug --devtool eval-cheap-module-source-map
--output-pathinfo [boolean]
-p shortcut for --optimize-minimize --define
process.env.NODE_ENV="production" [boolean]
--progress Print compilation progress in percentage [boolean]
03: 模块选项 Module options:
--module-bind Bind an extension to a loader [string]
--module-bind-post [string]
--module-bind-pre [string]
04: 输出选项 Output options:
--output-path The output path for compilation assets
[string] [default: The current directory]
--output-filename The output filename of the bundle
[string] [default: [name].js]
--output-chunk-filename The output filename for additional chunks
[string] [default: filename with [id] instead of [name] or [id] prefixed]
--output-source-map-filename The output filename for the SourceMap [string]
--output-public-path The public path for the assets [string]
--output-jsonp-function The name of the jsonp function used for chunk
loading [string]
--output-pathinfo Include a comment with the request for every
dependency (require, import, etc.) [boolean]
--output-library Expose the exports of the entry point as library
[string]
--output-library-target The type for exposing the exports of the entry
point as library [string]
05: 高级选项 Advanced options:
--records-input-path Path to the records file (reading) [string]
--records-output-path Path to the records file (writing) [string]
--records-path Path to the records file [string]
--define Define any free var in the bundle [string]
--target The targeted execution environment [string]
--cache Enable in memory caching
[boolean] [default: It's enabled by default when watching]
--watch-stdin, --stdin Exit the process when stdin is closed [boolean]
--watch-aggregate-timeout Timeout for gathering changes while watching
--watch-poll The polling interval for watching (also enable
polling) [string]
--hot Enables Hot Module Replacement [boolean]
--prefetch Prefetch this request (Example: --prefetch
./file.js) [string]
--provide Provide these modules as free vars in all modules
(Example: --provide jQuery=jquery) [string]
--labeled-modules Enables labeled modules [boolean]
--plugin Load this plugin [string]
--bail Abort the compilation on first error
[boolean] [default: null]
--profile Profile the compilation and include information in
stats [boolean] [default: null]
06: 解析选项 Resolving options:
--resolve-alias Setup a module alias for resolving (Example:
jquery-plugin=jquery.plugin) [string]
--resolve-extensions Setup extensions that should be used to resolve
modules (Example: --resolve-extensions .es6,.js)
[array]
--resolve-loader-alias Setup a loader alias for resolving [string]
07: 优化选项 Optimizing options:
--optimize-max-chunks Try to keep the chunk count below a limit
--optimize-min-chunk-size Try to keep the chunk size above a limit
--optimize-minimize Minimize javascript and switches loaders to
minimizing [boolean]
08: 统计选项 Stats options:
--color, --colors Enables/Disables colors on the console
[boolean] [default: (supports-color)]
--sort-modules-by Sorts the modules list by property in module
[string]
--sort-chunks-by Sorts the chunks list by property in chunk
[string]
--sort-assets-by Sorts the assets list by property in asset
[string]
--hide-modules Hides info about modules [boolean]
--display-exclude Exclude modules in the output [string]
--display-modules Display even excluded modules in the output
[boolean]
--display-max-modules Sets the maximum number of visible modules in
output [number]
--display-chunks Display chunks in the output [boolean]
--display-entrypoints Display entry points in the output [boolean]
--display-origins Display origins of chunks in the output
[boolean]
--display-cached Display also cached modules in the output
[boolean]
--display-cached-assets Display also cached assets in the output
[boolean]
--display-reasons Display reasons about module inclusion in the
output [boolean]
--display-depth Display distance from entry point for each
module [boolean]
--display-used-exports Display information about used exports in
modules (Tree Shaking) [boolean]
--display-provided-exports Display information about exports provided
from modules [boolean]
--display-optimization-bailout Display information about why optimization
bailed out for modules [boolean]
--display-error-details Display details about errors [boolean]
--display Select display preset (verbose, detailed,
normal, minimal, errors-only, none) [string]
--verbose Show more details [boolean]
09: 选项 Options:
--help, -h 显示帮助信息
--version, -v 版本号
--json, -j 将结果以JSON格式显示 4.准备项目文件夹及文件
为了更好地演示和学习webpack，请建好下列文件夹和文件
项目根目录
│ package.json
├───node_modules
│ └╌╌ 下面是npm包
├───dist
│ └╌╌╌╌╌logo.jpg
├───build
│ ├╌╌╌╌╌ build.js
│ ├╌╌╌╌╌ webpack.base.conf.js
│ ├╌╌╌╌╌ webpack.dev.conf.js
│ └╌╌╌╌╌ webpack.prod.conf.js
├───src
│ ├╌╌╌╌╌ main.js
│ └╌╌╌╌╌tmp
│ ├╌╌╌╌╌home.js
│ ├╌╌╌╌╌about.js
│ └╌╌╌╌╌contact.js
│ └╌╌╌╌╌template
│ └╌╌╌╌╌daqi.html // 为hmtl插件的模板
│ └╌╌╌╌╌images
│ └╌╌╌╌╌logo.jpg 先只需写这几个文件，后面会陆续补充
二：打包
准备配置文件
根目录/build/webpack.dev.conf.js的内容如下，这是史上最简单的配置文件了
module.exports = {
entry: './src/main', //main.js中的.js可以省略，前面的./不能省
output:{
filename:'./dist/app.js' // dist文件夹不存在时，会自动创建
}
}根目录/src/main.js中随便写一句
console.log('hello,欢迎来到零和壹在线课堂')打包
D:\03www2018\study\webpack2017>npm run a,显示如下
> webpack2017@1.0.0 a D:\03www2018\study\webpack2017
> webpack --config ./build/webpack.dev.conf.js
Hash: 94dc0f2301921649904c // complication的hash值，它的长度和算法由output中相应的项决定
Version: webpack 3.10.0 // webpack的版本
Time: 55ms // 打包花费的时间
Asset Size Chunks Chunk Names
./dist/app.js 2.5 kB 0 [emitted] main //单个文件和数组的chunk名字默认为main
[0] ./src/main.js 32 bytes {0} [built]打开打包后的文件看下,整体是一个自执行文件，每个文件是一个模块做为自执行函数的参数
三：开启服务器
先启动看下，根目录>npm run b
从启动的信息中可以看到，它包含了上面的打包，项目的网址是http://localhost:8080/，可以在浏览器中打开看下效果，但由于没有指定入口文件，所以会显示当前目录的内容,有一点必须明白，服务器打包的后的文件并没有物理存在电脑上，只是在内存中，为了方便教程的讲解，在这里先讲下服务器的配置，有关全部配置的讲解，请参考下一篇文章:配置文件详解
3.1 使用HtmlWebpackPlugin插件生成首页
首页一般为一个html文件，我们到现在还没有定义，为了方便，顺便提前了解一下webpack的插件功能，我这里使用HtmlWebpackPlugin来生成首页，插件的使用基本相同，分以下几步
- 第一步安装
根目录>cnpm i -D html-webpack-plugin - 修改配置文件
根目录/build/webpack.dev.conf.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin'); //第二步导入
module.exports = {
entry: './src/main', //main.js中的js可以省略，前面的./不能省
output:{
filename:'./dist/[hash]app.js',
hashDigestLength: 8 // 默认长度是20
},
plugins: [new HtmlWebpackPlugin], //第三步，实例化后放在plugins这个数组中就行
devServer: {
contentBase: path.join(__dirname, "../dist"), //网站的根目录为 根目录/dist，如果配置不对，会报Cannot GET /错误
port: 9000, //端口改为9000
open:true // 自动打开浏览器，适合懒人
}
}生成的html文件只在内存中，并没有存在物理磁盘上，来看一下生成的内容,留心下生成的js文件中的hash值，它的长度是8位，就是上面hashDigestLength: 8定义的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="./dist/4e0c807aapp.js"></script></body>
</html>html-webpack-plugin的用途
- 对于打包的文件名中有hash的，这个插件是必选，因为每次源文件修改，打包后的名字就不一样
- 生成一个html5模板文件，可适用于lodash模板，也可以利用自己定义的加载器
- js注入，打包后的js文件会自动注入到html文件的body结尾部分(默认，也可以注入到head部分)
- css文件注入,假如你使用ExtractTextPlugin插件(这个插件也是必须要了解的)将css文件是单独剥离出来，不放在html中的style标签内，它会自动将css链接注入到link标签中
html-webpack-plugin插件完整配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig={
title: 'hello,零和壹在线课堂', // html5文件中<title>部分
filename: 'front.html', // 默认是index.html，服务器中设置的首页是index.html，如果这里改成其它名字，那么devServer.index改为和它一样，最终完整文件路径是output.path+filename，如果filename中有子文件夹形式，如`./ab/cd/front.html`，只取`./front.html`
template: './src/template/daqi.html', //如果觉得插件默认生成的hmtl5文件不合要求，可以指定一个模板，模板文件如果不存在，会报错，默认是在项目根目录下找模板文件，才模板为样板，将打包的js文件注入到body结尾处
inject:head, // true|body|head|false，四种值，默认为true,true和body相同,是将js注入到body结束标签前,head将打包的js文件放在head结束前,false是不注入，这时得要手工在html中加js
}
module.exports = {
entry: './src/main', //main.js中的js可以省略，前面的./不能省
output:{
filename:'./dist/[hash]app.js',
hashDigestLength: 8
},
plugins: [new HtmlWebpackPlugin(HtmlWebpackPluginConfig)], //先不配置插件，看看效果
devServer: {
contentBase: path.join(__dirname, "../dist"), //网站的根目录为 根目录/dist
port: 9000, //端口改为9000
open:true, // 自动打开浏览器
index:'front.html' // 与HtmlWebpackPlugin中配置filename一样
}
}3.2 devServer常用配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig={
title: 'hello,零和壹在线课堂', // html5文件中<title>部分
filename: 'front.html', // 默认是index.html，服务器中设置的首页是index.html，如果这里改成其它名字，那么devServer.index改为和它一样
template: './src/template/daqi.html', // 如果觉得插件默认生成的hmtl5文件不合要求，可以指定一个模板，模板文件如果不存在，会报错，默认是在项目根目录下找模板文件，才模板为样板，将打包的js文件注入到body结尾处
inject:'body', // true|body|head|false，四种值，默认为true,true和body相同,是将js注入到body结束标签前,head将打包的js文件放在head结束前,false是不注入，这时得要手工在html中加js
}
module.exports = {
entry: './src/main', //main.js中的js可以省略，前面的./不能省
output:{
filename:'./dist/[hash]app.js',
hashDigestLength: 8
},
plugins: [new HtmlWebpackPlugin(HtmlWebpackPluginConfig)], //先不配置插件，看看效果
devServer: {
contentBase: path.join(__dirname, "../dist"), //网站的根目录为 根目录/dist
port: 9000, //端口改为9000
host: '192.168.0.103', //如果指定的host，这样同局域网的电脑或手机可以访问该网站,host的值在dos下使用ipconfig获取
open:true, // 自动打开浏览器
index:'front.html', // 与HtmlWebpackPlugin中配置filename一样
inline:true, // 默认为true, 意思是，在打包时会注入一段代码到最后的js文件中，用来监视页面的改动而自动刷新页面,当为false时，网页自动刷新的模式是iframe，也就是将模板页放在一个frame中
hot:false,
compress:true //压缩
}
}结合服务器和html插件，最后生成的配置文件如下
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack')
const HtmlWebpackPluginConfig={
title: 'hello,零和壹在线课堂', // html5文件中<title>部分
filename: 'front.html', // 默认是index.html，服务器中设置的首页是index.html，如果这里改成其它名字，那么devServer.index改为和它一样
// 也是 context+template是最后模板的完整路径，./不能少
template: './template/daqi.html', // 如果觉得插件默认生成的hmtl5文件不合要求，可以指定一个模板，模板文件如果不存在，会报错，默认是在项目根目录下找模板文件，才模板为样板，将打包的js文件注入到body结尾处
inject:'body', // true|body|head|false，四种值，默认为true,true和body相同,是将js注入到body结束标签前,head将打包的js文件放在head结束前,false是不注入，这时得要手工在html中加js
}
module.exports = {
context: path.resolve(__dirname,'../src'), //D:\03www2018\study\webpack2017\build\src
entry: './main', //main.js中的js可以省略，前面的./不能省
output:{
path:path.resolve(__dirname,'../dist'),
filename: './[hash]app.js',
hashDigestLength: 8
},
module: {
rules: [
]
},
plugins: [
new HtmlWebpackPlugin(HtmlWebpackPluginConfig), // 生成首页html5文件，外部插件需要安装
new webpack.DefinePlugin({BJ: JSON.stringify('北京'),}) // 内置插件，无须安装，可以理解为它是webpack实例的一个方法，该插件相当于apache等web服务器上定义一个常量
],
devServer: {
contentBase: path.resolve(__dirname, "../dist"), //网站的根目录为 根目录/dist，这个路径一般与output.path一致，因为html插件生成的html5页是放在output.path这个目录下
port: 9000, //端口改为9000
open:true, // 自动打开浏览器，每次启动服务器会自动打开默认的浏览器
index:'front.html', // 与HtmlWebpackPlugin中配置filename一样
inline:true, // 默认为true, 意思是，在打包时会注入一段代码到最后的js文件中，用来监视页面的改动而自动刷新页面,当为false时，网页自动刷新的模式是iframe，也就是将模板页放在一个frame中
hot:false,
compress:true //压缩
}
}3.3 给首页加一张图片
// D:\03www2018\study\webpack2017\src\template\daqi.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大奇模板</title>
</head>
<body>
<div >欢迎来到零和壹在线课堂1234</div>
<div ></div>
<img src='/img/logo2.jpg' data-src='../images/logo.jpg' />
</body>
</html>- webpack，通过使用
file-loader可以将图片当成一个模块，使用require来导入，进一步可以使用url-loader将图片转成base64-data - 使用图片的场景大致分四种，html文件中使用src标签，样式的background中设定背景，js文件中元素.innerHTML='<img src="logo.jpg" />'的方式，最后一种是在vue或react等框架中使用，今天要讲的是第一种，如何处理html文件src标签中的图片
- html文件中图片的处理有两种，一种是象正常使用图片一样，不打包，但图片必须放在打包生成文件目录下，如
./dist/logo.jpg，也就是最后的入口front.html文件可以读到的位置，在front.html中使用<img src='./logo.jpg'/>,表示logo.jpg与最后生成的front.html是同级目录。但实际工作中，往往图片放在与打包前的html模板文件一起的，需要将图片和html模板文件分别打包到./dist下，这使用html-loader是解决不了的，官网及网上大部分教程讲得不是特别清楚，在这里我详细讲下，这里就要用到file-loader，否则会报错Error: Child compilation failed: Module parse failed: Unexpected character '�' (1:0)You may need an appropriate loader to handle this file type.
第1步：安装html-loader和file-loader,根目录/cnpm i -D html-loader file-loader
file-loader处理require('./logo.jpg')这种类型，将图片当成一个js模块
html-loader是将html中src标签中配置有特定data属性的图片，转为由require的方式来导入。也就是说，它只是标识为哪些图片需要由require的方式导入，但具体require导入，得需要file-loader插件，
第2步：在webpack.conf.js中配置这两个加载器
module: {
rules: [
{
test: /\.html$/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']
}
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
//name: '[path][name].[ext]',
name: '[name]2.[ext]', //最后生成的文件名是 output.path+ outputPaht+ name，[name],[ext],[path]表示原来的文件名字，扩展名，路径
//useRelativePath:true,
outputPath: 'img/' // 后面的/不能少
}
}
]
},
]
},第3步：在html文件src标签中引用图片
<img src='/img/logo2.jpg' data-src='../images/logo.jpg' />
这里注意，data-src是打包前图片位置，src是打包后图片的url
四: 手机或其它电脑访问该服务器
实际开发中，需要手机或其它设备如ipad即时访问该服务器
服务器: 就是开启webpack-dev-server这台电脑
其它设备：下面以同一网络下的手机为例(同一wifi就行)
第一步：配置服务器
devServer: {
contentBase: path.join(__dirname, "../dist"), //网站的根目录为 根目录/dist，如果配置不对，会报Cannot GET /错误
port: 9000,
open: true,
host: '192.168.0.103' //请在dos下，输入ipconfig可以找到当前电脑的ip
}第二步：在手机上找一个合适的浏览器，输入 192.168.0.103:9000就可以访问
说明：有少数浏览器打开是空白网页，我使用uc浏览器ok，ip地址和端口与你自己的设置有关，我上面只是我的设置