Webpack实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/wangbiao9292/article/details/104248243

安装

本地安装(通常建议进行本地安装,方便分离项目)

npm install --save-dev webpack
npm install --save-dev webpack@<version>
如果使用的webpack4+版本,还需要安装webpack-cli
npm install --save-dev webpack-cli

全局安装(全局安装不易分离项目,不建议)

npm install --global webpack

体验最新版本

npm install webpack@beta
npm install webpack/webpack#<tagname/branchname>

起步

创建webpack目录

mkdir webpack-demo 
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

在这里插入图片描述
创建完后,目录是这样的
版本如下:
然后根据官方文档进行一个小测试,具体地址如下:
https://www.webpackjs.com/guides/getting-started/
简单的了解下webpack的运作方式

模块

没什么好讲的

配置文件

在目录中建一个文件webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

把这段放进去就能够生成bundle.js了

npm脚本

在这里插入图片描述
在package.json文件里的scripts里面,添加build,就可以用npm run build进行编辑了,可以不用npx webpack命令了;其中用npm run build – --colors可以把变量colors传递给webpack命令

资源管理

css管理

1 添加css管理模块

npm install --save-dev style-loader css-loader

配置webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }]
    }
};

图片管理

安装模块

npm install --save-dev file-loader

在webpack里面进行配置

{
              test: /\.(png|svg|jpg|gif)$/,
              use: [
                 'file-loader'
                ]
                }

字体管理

用到的是file-loader 和 url-loader进行处理的
配置webpack.config.js

{
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
            'file-loader'
         ]
 }

数据管理

json字符串默认就是支持的,可以直接引入
至于csv,tsv,xml就需要用csv-loader和xml-loader模块进行处理

npm install --save-dev csv-loader xml-loader

配置webpack.config.js

{
          test: /\.(csv|tsv)$/,
          use: [
            'csv-loader'
          ]
        },
        {
          test: /\.xml$/,
          use: [
            'xml-loader'
          ]
        }

全局资源

一种思想,就是把代码和资源整合在一起,方便进行移植

管理输出

这个模块主要弄清楚以下几点:
1 入口文件entry可以分离出很多Js
2 配置输出
3 使用HtmlWebpackPlugin进行js配置
4 使用clean-webpack-plugin进行dist清理(不过我这里一直报错,没有排查)
具体设置可以参考官网:
https://www.webpackjs.com/guides/output-management/#%E8%AE%BE%E5%AE%9A-htmlwebpackplugin

开发

根据官方文档解释,需要弄清楚以下几个东东的用法:
1 source map,用来追踪报错的源码位置的,方便调试
2 了解webpack’s Watch Mode
3 了解webpack-dev-server
4 了解webpack-dev-middleware

source map

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

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
+   devtool: 'inline-source-map',
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

加了这句后,就可以在调试的时候,报错直接怼到源代码位置了

观察者模式

添加以下代码就可以时时刻刻观察代码改动了

 {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "watch": "webpack --watch",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "xml-loader": "^1.2.1"
    }
  }

使用webpack-dev-server

安装

npm install --save-dev webpack-dev-server

添加以下内容

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

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    devtool: 'inline-source-map',
+   devServer: {
+     contentBase: './dist'
+   },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

然后在package.json里配置如下:

{
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "webpack --watch",
+     "start": "webpack-dev-server --open",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "xml-loader": "^1.2.1"
    }
  }

使用webpack-dev-middleware

感觉用不到…自己摸索吧

模块热替换

很多第三方框架都内部继承了…没什么好讲的…除非是单独使用webpack进行打包…如果单独使用…我何必不用gulp?

tree shaking

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code);说白了,就是手贱多写了一些没有用的代码,但是你有忘记了,那么它来帮你搞定咯;目前我还用不到…

生产环境构建

本章需要了解的是开发环境和生产环境的区别,需要注意以下几点:
1 开发环境,我们需要能够代码追踪,实时加载和热模块替换等能力
2 生产环境我们需要更清凉的,体积更小的打包机制
3 但是有一些通用配置,所以我们可以用webpack-merge工具
4 在生产环境中,我们推荐使用source-map而不是inline-source-map

webpack-merge

安装

npm install --save-dev webpack-merge

然后在package.json里面进行调用不同模块的webpack配置

"scripts": {
-     "start": "webpack-dev-server --open",
+     "start": "webpack-dev-server --open --config webpack.dev.js",
-     "build": "webpack"
+     "build": "webpack --config webpack.prod.js"
    },