webpack从零开始第1课:安装webpack和webpack-dev-server

其他 2018-04-26 08:32:11 阅读次数: 3

原文地址：https://segmentfault.com/a/1190000012536871

webpack目录

本文参考文档

前提条件

  • 电脑装了一个全新的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地址和端口与你自己的设置有关，我上面只是我的设置

猜你喜欢

转载自www.cnblogs.com/xbzhu/p/8949350.html
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022