webpack从零开始第1课:安装webpack和webpack-dev-server
原文地址:https://segmentfault.com/a/1190000012536871
webpack目录
- 第1课: 安装webpack和webpack-dev-server
- 第2课: 配置文件
- 第3课: 做为node的一个模块来使用
- 第4课: 插件篇
- 第5课: 模块篇
- 第6课: 在Vue开发中使用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
一:安装webpack和webpack-dev-server
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 style="background-color:#eee;font-size:16px;">欢迎来到零和壹在线课堂1234</div>
<div id='hello'></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地址和端口与你自己的设置有关,我上面只是我的设置