webpack4安装与学习

在慕课上学习了webpack的课程，做了一些笔记，算分享也算记录吧。教程里的是webpack1和现在的webpack4有很多区别，自己也走了不少的坑，最好使用的时候去看官方文档。

 

https://webpack.js.org/

在填坑的时候也借鉴了很多人写的文章。所以有很多部分是融合了超级多前人的经验总结，然后自己结合实际进行操作的做笔记。部分地方可能有重复，看得懂就好了。

1.全局安装webpack       npm install -g webpack

2.创建项目文件，初始化项目文件目录  npm init

到项目文件下安装webpack   npm install webpack

3.安装全局的webpack-cli     npm install -g webpack-cli  //获取当前webpack版本号配置文件

4.配置mode 

默认有production和development两种模式可以设置

命令行设置   webpack --mode development

5.新建入口  在项目文件目录下新建src文件夹，新建index.js文件入口

6.文件打包   命令行输入 webpack --mode development 或 webpack --mode production

webpack将会默认打包，将./src/index.js文件打包成./dist/main.js文件（自动生成dist文件夹和main.js文件）

7.建立html文件，在项目目录下建立html文件，可以直接引用dist/main.js文件。

注意，我们的 script 引用的文件是 dist/main.js，而不是 index.js。这正是前端开发领域的一个趋势：开发的源文件（例子中的 index.js）与最终部署的文件（例子中的 dist/main.js）是区分开的，之所以这样，是因为开发环境与用户的使用环境并不一致。比如我们可以在开发环境使用 ES2017 甚至 ES2018 的特性，而用户的浏览器不见得支持 - 这也是 webpack 等打包工具的一个意义，它们能够辅助我们构建出在目标用户浏览器上正常运行的代码。

8.其他参数配置

我们如果需要配置webpack指令的其他参数，只需要在webpack –mode production/development后加上其他参数即可，如：

webpack --mode development --watch --progress --display-modules --colors --display-reasons

 

实时刷新

9.监控文件

watch选项最为直观，但在默认情况下，watch选项是关闭状态。

启用watch选项    webpack --mode development --watch

10.刷新浏览器（看官方文档容易填坑，奈何英语emmmm）

https://github.com/webpack/webpack-dev-server

https://webpack.js.org/configuration/dev-server/#devserver

webpack-dev-server,一个基于expressjs的开发服务器，提供实时刷新浏览器页面的功能。

安装webpack-dev-server

首先在项目下安装 webpack-dev-server: npm install -g webpack-dev-server

然后在命令行下执行webpack-dev-server --mode development --output-public-path dist

webpack-dev-server是一个轻量级的服务器，修改文件源码后，自动刷新页面将修改同步到页面上安装webpack-dev-server：①全局安装：npm install webpack-dev-server -g 

②在项目中安装并将依赖写在package.json文件中:npm install webpack-dev-server --save-dev

③使用命令webpack-dev-server --mode development --output-public-path src完成自动刷新，指定publicPath，这部分很容易没有实时刷新。

④默认的端口号是8080，如果需要8080端口被占用，就需要改端口，webpack-dev-server --port 3000(将端口号改为3000)，可以直接在webpack.config.js配置文件中配置devServer属性，开启热更新和port。

⑤启动服务，输入localhost:端口号，就显示发布的所有根目录，如果项目根目录中没有index.html文件，就会在浏览器中列出项目根目录中的所有的文件夹。

⑥当使用webpack-dev-server --mode development --output-public-path src命令时，在每次修改文件，是将文件打包保存在内存中并没有写在磁盘里，这种打包得到的文件和项目根目录中的index.html位于同一级。使用webpack命令将打包后的文件保存在磁盘中例如在index.html文件中引入通过webpack-dev-server --mode development  --output-public-path src打包的build.js

<script src="build.js"></script>　　在index.html文件中引入通过webpack命令打包的build.js　

<script src="./build/build.js"></script>

--inline 内联模式，在开发服务器的两种不同模式之间切换。默认情况下, 应用程序将被启用内嵌模式。这意味着将在包中插入一个脚本来处理实时重装, 并且生成消息将出现在浏览器控制台中。

--hot 启用热模块更换功能

//////以上是搜索了各个教程里面说的，但是实际操作还是有问题，

index.html入口文件是在根目录下，没有进行配置content-base，因为配置了之后会只打包配置的目录文件，默认是根文件。配置了output的publicPath（很重要，删掉之后就不能自动刷新了，应该是webpack-dev-server将每次打包的文件根据output设置生成在publicPath目录下，而文件本身依旧是手动打包的，无法查看到自动刷新打包的文件），只配置了端口，没有配置hot:true和inline:true(最开始配置了，但是有报错，所以删掉莫名OK了）

 

 

 

 

⑦webpack自带的watch命令与webpack-dev-server的区别

--watch是文件修改后自动打包，webpack-dev-server是修改后发布到服务器上

 

⑧webpack-dev-server --mode development --content-base src --inline --hot//显示只针对src路径下的文件刷新,文件修改之后浏览器自动刷新，如果要打开的文件和打包的文件不在一个文件夹内，最好不要设定文件夹

 

11.打包css文件

在项目目录下安装处理css文件的loader

命令行输入：npm install css-loader style-loader --save-dev

css-loader //处理css文件
style-loader //将css-loader处理后的文件作为样式标签<style>插入到html文件中

在处理css文件的时候要指定loader，如在index.js文件里输入require('style-loader!css-loader!./style.css')

或者直接在命令行输入webpack --mode development --module-bind "css=style-loader!css-loader"

12--progress(查看进度)

13--display-modules(显示隐藏的模块)

14 --display-reasons(显示打包原因)

 

15.配置，webpack需要传入配置对象，因此进行新建配置文件webpack.config.js，或者使用node.js内置的path模块进行配置，并在它前面加上 __dirname这个全局变量。可以防止不同操作系统之间的文件路径问题，并且可以使相对路径按照预期工作。

①先写moudule.exports={};进行配置；

②入口文件配置，entry="入口文件路径，如./src/js/main.js";

③输出文件配置，output={path:__dirname+"输出文件路径，如/dist/js/bundle.js"};//要创建dist文件夹

__dirname为运行时的当前路径；

另一种方式，先定义const path = require("path");//引入nodejs的path模块

然后在输出文件路径path:path.resolve(__dirname,"./dist/js/bundle.js");

//path.resolve()方法解析了当前路径，将相对路径改为绝对路径。

④重新指定配置文件名

webpack --config 文件名

如webpack --config webpack.dev.config.js

16.定义执行脚本，可以在package.json中设置

在script中设置，如设置"webpack":"webpack --mode development --config webpack.config.js --progress --display-modules --colors --display-reason",//--colors(彩色显示)

直接执行上面的脚本npm run webpack

17.entry配置（chunk），

①字符串表示，单输入，所有依赖都要在入口文件中指定，如entry:"./src/js/main.js",

②数组表示，多输入，两个需要打包到一起的文件可以在配置文件的entry中用数组表示，如entry:["./app/entry1", "./app/entry2"],//这两个文件将会打包到一起

③对象表示（哈希），多页面入口，entry:{page1:"./page1",page2:["./src/a.js","./src/b.js"]},

这三种方式都会把文件打包到输出文件中。

18.output配置，

①单个入口起点，就设置一个出口，如output:{filename:'bundle.js',path:'/dist/js'}

②多个入口起点，可以设置name或者hash，如output:{filename:'[name].js',path:__dirname+'/dist/js'}

或output:{filename:'[name]-[hash].js',path:__dirname+'/dist/js'}

或output:{filename:'[name]-[chunkhash].js',path:__dirname+'/dist/js'}

hash值可以认为是版本号或者MD5值保证每个文件的唯一性，每一次修改之后生成文件的hash值不一样，文件名不一样。

③publicPath可以理解为占位符。当需要上线的时候可以将服务器地址设置到这个参数中，output:{path:'xxx',filename:'xxx',publicPath:'http://cdn.com/'}

 

插件（plugin）

插件是 webpack 的支柱功能。webpack 自身也是构建在 webpack 配置中用到的相同的插件系统之上。插件目的在于解决 loader 无法实现的其他事。

19.插件html-webpack-plugin

要引用之前先安装,在项目文件目录下安装 npm install html-webpack-plugin --save-dev

安装好之后，在webpack.config.js配置文件中对插件的引用

var htmlWebpackPlugin = require('html-webpack-plugin');//commonJS写法

在module.exports中添加plugin部分进行插件初始化，

插件列表，当多个bundle需要共享一些相同的插件时，CommonChunkPlugin可以将这些依赖项提取到一个共享包中，以免重复。

plugins:[

    new webpack.optimize.CommonsChunkPlugin({

        .....

    }),

    new htmlChunkPlugin({

        template:'index.html',//自定义模板

        filename:'index-[hash].html',//生成文件名

        inject:'head',//指定链接注入在<head>标签中还是<body>标签中，为false值时表示不自动注入文件中，需要手动设置

        title:'webpack demo',//传递参数，可以在index.html模板中引用

        minify:{//压缩html文件，具体参数设置可以查看官方文档

            

        }

    })

]

index.html引用配置文件中的参数，JS语法模式，要使用JS语句可以使用<%%>将每行代码包裹起来。赋值可以使用<%=xxx %>，如<%=htmlWebpackPlugin.options.title%>就可以取到配置文件中定义的title的值。

在配置文件中可以任意的配置参数向html文件进行传参。

自定义引用的js文件可以直接写到html文件中

如在html文件中相对应的位置写，<script src="<%=htmlWebpackPlugin.files.chunks.main.entry %>"></script>

<script src="<%=htmlWebpackPlugin.chunks.a.entry%>"></script>

chunk是文件入口

以上是单文件引用的示例，多文件引用则需要调用多次的html-webpack-plugin插件，设置方式相同

多页面使用同一个页面模板，可以定义htmlWebpackPlugin插件中的chunks参数，进行设置不同的页面引用不同的chunks，如设置chunks:['main','a']

excludeChunks:['a'],//指出排除的chunk

直接将公共初始化脚本嵌入到html页面中，inline方式，在html模板中加上脚本源码引用代码，

如<script type="text/javascript">

<%=compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()%>

</script>

//.substr()的作用是将删除publicPath部分的绝对路径获取文件的相对路径。

按照文件顺序引用js文件可以手动设置for循环出htmlWebpackPlugin.files.chunks的entry值插入文件中。

 

 

20.loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

 

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

loader能够import导入任何类型的模块。

在webpack的配置中loader有两个目标：

①.test属性，用于表示出应该被对应的loader进行转换的某个或某些文件。

②.use属性，表示进行转换时，应该使用那个loader。

使用方式：

①配置，在webpack.config.js中指定

②内联，在每个import语句中显示指定loader

③CLI，在shell命令中指定

 

在webpack.config.js中配置loader

在module.exports中添加属性module

如安装babel插件（js编译器），使用此插件转换ES6代码，如何安装根据官网进行安装：

module:{

    rules:[

       { test:/\.js$/,

        exclude:/node_modules/,

        loader:"babel-loader"

        }

    ]

}

设置preset，指定preset（预配置）设置如何处理js文件

①在rules中设置query:{presets:['latest']}

②在根目录下创建一个.babelrc文件,其中内容为：

{

    "presets":["env"]

}

③在package.json中，增加babel属性：

"babel":{

"presets":["latset"]

}

 

21.优化

可以在配置文件中，设置打包范围，如exclude设置不处理哪些模块，include处理哪些文件下的内容。

具体可以看官方文档进行配置。