webpack

一、webpack的使用

官网： https://www.webpackjs.com/

二、webpack的基本配置

完成配置文件后，在控制台就可以只使用webpack指令打包输出文件

三、web-dev-server的基本使用

安装： npm i webpack-dev-server -D 安装到项目本地中

webpack-dev-server本地安装，无法在终端中直接运行，可以在package.json文件中的scripts节点中添加: "dev"："webpack-dev-server"

用dev 来替代，则可实现

强制本地安装webpack-dev-server

完成本地安装后，可以使用 npm run dev编译，

webpack-dev-server 会开启webpack监听本地代码文件功能。当本地代码文件更新后，进行重新打包编译，webpack-dev-server 通过WebSocket将更新模块信息推送给浏览器。浏览器根据此次编译信息，去获取最新代码，一个大致这样的操作。

🐋 webpack本身就支持监听文件变化，webpack-dev-server只是默认开启webpack的监听属性。

四、webpack-dev-server 配置命令的两种方式

1）

2）

五、html-webpack-plugin

这个插件用来简化创建服务于 webpack bundle 的 HTML 文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件，也可以使用 lodash 模板加载生成的 bundles，或者自己加载这些 bundles。

安装：

npm install html-webpack-plugin@2 --save-dev

这个插件可以帮助生成 HTML 文件，在 body 元素中，使用 script 来包含所有你的 webpack bundles，只需要在你的 webpack 配置文件中如下配置：

var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
}

这将会自动在 dist 目录中生成一个名为 index.html 的文件，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script> 
  </body>
</html>

参考转载：https://www.cnblogs.com/haogj/p/5160821.html

六、npm——安装css-loader style-loader less-loader

在Webpack中，通过css-loader，可以实现在js文件中通过require的方式，来引入css

在webpack.config.js修改：

module: {
        loaders: [
            {test: /\.less$/, loader: 'style-loader!css-loader!less-loader'},

        ]
    }

七、url-loader file-loader

1）src和url

当我们基于webpack进行开发时，引入图片会遇到一些问题（包括img的src和background的url）。

file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL。file-loader可以解析项目中的url引入（不仅限于css）

url-loader 如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。

url-loader封装了file-loader。url-loader不依赖于file-loader。