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

命令行的选项其实都可以写在配置文件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 devtoolforbetter debugging experience (Example:--devtool eval-cheap-module-source-map) [string]

-d shortcutfor--debug --devtool eval-cheap-module-source-map--output-pathinfo [boolean]

-p shortcutfor--optimize-minimize --defineprocess.env.NODE_ENV="production" [boolean]

--progress Print compilation progressinpercentage [boolean]

03: 模块选项 Module options:

--module-bind Bindanextensiontoaloader[string]

--module-bind-post [string]

--module-bind-pre [string]

04: 输出选项 Output options:

--output-path The output pathforcompilation assets[string] [default: The current directory] --output-filename The output filename of the bundle[string] [default: [name].js]

--output-chunk-filename The output filenameforadditional chunks[string] [default: filename with [id] instead of [name] or [id] prefixed]

--output-source-map-filename The output filenameforthe SourceMap [string]

--output-public-path The public pathforthe assets [string]

--output-jsonp-function The name of the jsonp function usedforchunkloading [string]

--output-pathinfo Include a comment with the requestforeverydependency (require, import, etc.) [boolean]

--output-library Expose the exports of the entry point as library[string]

--output-library-target The typeforexposing the exports of the entrypoint 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 varinthe bundle [string]

--target The targeted execution environment [string]

--cache Enableinmemory caching[boolean] [default: It's enabled by default when watching]

--watch-stdin, --stdin Exit the processwhenstdin is closed [boolean]

--watch-aggregate-timeout Timeoutforgathering changeswhilewatching

--watch-poll The polling intervalforwatching (also enablepolling) [string]

--hot Enables Hot Module Replacement [boolean]

--prefetch Prefetch this request (Example:--prefetch./file.js) [string]

--provide Provide these modules as free varsinall 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 compilationandincludeinformationinstats [boolean] [default: null]

06: 解析选项 Resolving options:

--resolve-alias Setup amodulealiasforresolving(Example:jquery-plugin=jquery.plugin) [string]

--resolve-extensions Setup extensions that should be used to resolvemodules (Example: --resolve-extensions .es6,.js) [array]

--resolve-loader-alias Setup a loaderaliasforresolving [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 javascriptandswitches loaders tominimizing [boolean]

08: 统计选项 Stats options:

--color, --colors Enables/Disables colors on the console[boolean] [default: (supports-color)]

--sort-modules-by Sorts the modules list by propertyinmodule[string]

--sort-chunks-by Sorts the chunks list by propertyinchunk[string]

--sort-assets-by Sorts the assets list by propertyinasset[string]

--hide-modules Hides info about modules [boolean]

--display-exclude Exclude modulesinthe output [string]

--display-modules Display even excluded modulesinthe output[boolean]

--display-max-modules Sets the maximum number of visible modulesinoutput [number] --display-chunks Display chunksinthe output [boolean]

--display-entrypoints Display entry pointsinthe output [boolean]

--display-origins Display origins of chunksinthe output[boolean]

--display-cached Display also cached modulesinthe output[boolean]

--display-cached-assets Display also cached assetsinthe output[boolean]

--display-reasons Display reasons aboutmoduleinclusionintheoutput [boolean]

--display-depth Display distance from entry pointforeachmodule [boolean]

--display-used-exports Display information about used exportsinmodules (Tree Shaking) [boolean]

--display-provided-exports Display information about exports providedfrom modules [boolean]

--display-optimization-bailout Display information about why optimizationbailed 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，请建好下列文件夹和文件

先只需写这几个文件，后面会陆续补充

二：打包

准备配置文件

根目录/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,显示如下

打开打包后的文件看下,整体是一个自执行文件，每个文件是一个模块做为自执行函数的参数

三：开启服务器

先启动看下，根目录>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: [newHtmlWebpackPlugin],//第三步，实例化后放在plugins这个数组中就行

devServer: {

contentBase: path.join(__dirname,"../dist"),//网站的根目录为根目录/dist，如果配置不对，会报Cannot GET /错误

port:9000,//端口改为9000

open:true// 自动打开浏览器，适合懒人

}

生成的html文件只在内存中，并没有存在物理磁盘上，来看一下生成的内容,留心下生成的js文件中的hash值，它的长度是8位，就是上面hashDigestLength: 8定义的

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文件中部分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: [newHtmlWebpackPlugin(HtmlWebpackPluginConfig)],//先不配置插件，看看效果devServer: {contentBase: path.join(__dirname,"../dist"),//网站的根目录为根目录/distport:9000,//端口改为9000open:true,// 自动打开浏览器index:'front.html'// 与HtmlWebpackPlugin中配置filename一样}}

3.2 devServer常用配置

const path =require('path')

const HtmlWebpackPlugin =require('html-webpack-plugin');

const HtmlWebpackPluginConfig={title:'hello,零和壹在线课堂',// html5文件中部分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: [newHtmlWebpackPlugin(HtmlWebpackPluginConfig)],//先不配置插件，看看效果devServer: {contentBase: path.join(__dirname,"../dist"),//网站的根目录为根目录/distport:9000,//端口改为9000host:'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插件，最后生成的配置文件如下

constpath =require('path')constHtmlWebpackPlugin =require('html-webpack-plugin');constwebpack =require('webpack')constHtmlWebpackPluginConfig={ title:'hello,零和壹在线课堂',// html5文件中部分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\srcentry:'./main',//main.js中的js可以省略，前面的./不能省output:{ path:path.resolve(__dirname,'../dist'), filename:'./[hash]app.js', hashDigestLength:8},module: { rules: [ ] }, plugins: [newHtmlWebpackPlugin(HtmlWebpackPluginConfig),// 生成首页html5文件，外部插件需要安装newwebpack.DefinePlugin({BJ:JSON.stringify('北京'),})// 内置插件，无须安装，可以理解为它是webpack实例的一个方法，该插件相当于apache等web服务器上定义一个常量], devServer: { contentBase: path.resolve(__dirname,"../dist"),//网站的根目录为根目录/dist，这个路径一般与output.path一致，因为html插件生成的html5页是放在output.path这个目录下port:9000,//端口改为9000open:true,// 自动打开浏览器，每次启动服务器会自动打开默认的浏览器index:'front.html',// 与HtmlWebpackPlugin中配置filename一样inline:true,// 默认为true, 意思是，在打包时会注入一段代码到最后的js文件中，用来监视页面的改动而自动刷新页面,当为false时，网页自动刷新的模式是iframe，也就是将模板页放在一个frame中hot:false, compress:true//压缩}}

3.3 给首页加一张图片

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标签中引用图片

这里注意，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地址和端口与你自己的设置有关，我上面只是我的设置

下一课: webpack从零开始第2课: 配置文件

转自：https://segmentfault.com/a/1190000012536871

转自：webpack从零开始第1课:安装webpack和webpack-dev-server - 个人文章 - SegmentFault 思否