Webpack入门笔记(一)

最新推荐文章于 2023-03-16 23:16:23 发布

akueq

最新推荐文章于 2023-03-16 23:16:23 发布

阅读量5.4k

点赞数 2

分类专栏： webpack

本文链接：https://blog.csdn.net/fqq_5280/article/details/86562488

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Webpack入门笔记

webpack是什么：

入门之前首先我们要知道Webpack是什么：

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

也就是说，webpack会分析你的项目结构，找到javascript模块以及其他的一些浏览器不能直接运行的拓展语言（typescript等）并将其转换和打包。

在这里插入图片描述

webpack怎么用：

首先第一步建立好项目文件夹
第一次使用webpack需要安装下载

$ cnpm install webpack -g
$ npm install webpack-cli -g

使用webpack还需要webpack-cli的支持

创建package.json文件

$ npm init

在本项目中安装webpack作为依赖包

$ npm install --save-dev webpack

配置package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack --mode development",
    "build":"webpack --mode production",
  }

配置webpack.config.js

module.exports = {
    entry:  __dirname + "/app/main.js",//唯一入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    },
    mode:'development'//设置mode
}

命令行使用webpack就可以了

$ webpack
//或者
$ webpack main.js bundle.js

ps. 配置package.json的时候也可以配置成如下样子

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack --mode development",
    "build":"webpack --mode production",
    "start":"webpack"
  }

这样可以直接 $npm start启动

webpack更强大的用法

webpack.config.js配置

首先看一下webpack.config.js这个配置文件可以做什么

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
    //插件项
    plugins: [BannerPlugin],//这个插件用于在文件头部输出一些注释信息。
    //页面入口文件配置
    entry: {
        page1: "./page1",
        //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
        page2: ["./entry1", "./entry2"]
    },
    //入口文件输出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].bundle.js'
    },
    //加载器设置
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            { loader: "style-loader" },
            { loader: "css-loader" }
          ]
        }
      ]
    }
    //其它解决方案配置
    resolve: {
        //查找module的话从这里开始查找
        root: 'E:/github/flux-example/src', //绝对路径
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss'],
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};

webpack运行

webpack的运行也有一些参数可供选择

$ webpack --display-error-details //方便出错时能查阅更详尽的信息

$ webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包

$ webpack --watch   //监听变动并自动打包

$ webpack -p    //压缩混淆脚本，这个非常非常重要！

$ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了

页面和脚本怎么使用：

HTML

可以直接在页面引入webpack最终生成的页面脚本即可

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>

各脚本模块可以直接使用commonJS来书写，并可以直接引入未经编译的模块（之后在webpack.config.js里配置好了对应的加载器）

require('lodash') // 从模块目录查找
require('./file') // 按相对路径查找

//例如
require('../../css/reset.scss'); //加载初始化样式
require('../../css/allComponent.scss'); //加载组件样式
var React = require('react');
var AppWrap = require('../component/AppWrap'); //加载组件

Loader

webpack本身只能处理javascript模块，如果要处理其他类型的文件，就需要使用loader进行转换。

所以如果我们需要添加css文件，就需要css-loader和style-loader，他们做两件不同的事情，css-loader会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

//需要在webpack.config.js中加入这两个加载器（当然也需要提前下载好）

module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            { loader: "style-loader" },
            { loader: "css-loader" }
          ]
        }
      ]
    }

//在main.js中加入要加载的css文件
require("./style.css");

或者也可以只修改main.js

require("!style-loader!css-loader!./style.css");

或者不加入前缀但是更改命令的参数

require("./style.css");

$ webpack main.js bundle.js --module-bind 'css=style-loader!css-loader'

但是后两种方法都各自有各自的麻烦，所以还是推荐使用第一个方法来处理。

插件

插件在 webpack 的配置信息 plugins 选项中指定，用于完成一些 loader 不能完成的工作。

例如安装内置的BannerPlugin插件，用于在文件头部输出一些注释信息。

例如我们更改webpack.config.js

    //插件项
    plugins:[
        new webpack.BannerPlugin('！webpack！第一个！实例')
    ],

然后运行，运行之后打开bundle.js就有我们想要的注释信息了

/*! ！webpack！第一个！实例 */

查找依赖

使用命令 $ webpack --display-error-details查看查找过程。

Hash: ea706e67bbe47ba7608a
Version: webpack 4.28.4
Time: 269ms
Built at: 2019-01-20 15:08:08
    Asset      Size  Chunks             Chunk Names
bundle.js  24.4 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./app/Greeter.js] 171 bytes {main} [built]
[./app/main.js] 164 bytes {main} [built]
[./app/style.css] 1.13 KiB {main} [built]
[./node_modules/_css-loader@2.1.0@css-loader/dist/cjs.js!./app/style.css] 195 bytes {main} [built]
    + 3 hidden modules

故意出个错误看一下，在main.js中加入一句require("./c");

Hash: ac03028a39e7567fa62a
Version: webpack 4.28.4
Time: 269ms
Built at: 2019-01-20 15:10:15
    Asset      Size  Chunks             Chunk Names
bundle.js  24.5 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./app/Greeter.js] 171 bytes {main} [built]
[./app/main.js] 194 bytes {main} [built]
[./app/style.css] 1.13 KiB {main} [built]
[./node_modules/_css-loader@2.1.0@css-loader/dist/cjs.js!./app/style.css] 195 bytes {main} [built]
    + 3 hidden modules

ERROR in ./app/main.js
Module not found: Error: Can't resolve './c' in 'D:\A-WebStormCode\webpackOne\app'
resolve './c' in 'D:\A-WebStormCode\webpackOne\app'
  using description file: D:\A-WebStormCode\webpackOne\package.json (relative path: ./app)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: D:\A-WebStormCode\webpackOne\package.json (relative path: ./app/c)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        D:\A-WebStormCode\webpackOne\app\c doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        D:\A-WebStormCode\webpackOne\app\c.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        D:\A-WebStormCode\webpackOne\app\c.json doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        D:\A-WebStormCode\webpackOne\app\c.scss doesn't exist
      as directory
        D:\A-WebStormCode\webpackOne\app\c doesn't exist
[D:\A-WebStormCode\webpackOne\app\c]
[D:\A-WebStormCode\webpackOne\app\c.js]
[D:\A-WebStormCode\webpackOne\app\c.json]
[D:\A-WebStormCode\webpackOne\app\c.scss]
 @ ./app/main.js 7:0-14

通过这个就可以大致看出来webpack是怎么进行查找的。

这个笔记大概到这里，需要更详细的用法还是跟着webpack的中文文档。

akueq

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Webpack入门笔记(一)

Webpack入门笔记webpack是什么：入门之前首先我们要知道Webpack是什么：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。...
复制链接

扫一扫