项目自动化构建工具 - webpack

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。多个引入的模块打包成为一个文件。

webpack认为每一个文件都是一个模块,包括:js,css, less, json等等。

当前博文使用的是 webpack3.6.0 版本, 会对比当前最新版本 4.39.1的差异。

一、安装webpack

首先全局安装webpack

npm install webpack -g

局部安装

此方式会默认安装最新版本,当前最新版本为 4.0 以上

npm install webpack --save-dev

可下载指定版本的webpack

npm install webpack@3.6.0 --save-dev

 

最新版本 webpack 4.0的差异:

4.0以后,webpack已经将 webpack-cli分离了出来需要另外全局安装 webpack-cli

 

 

二、webpack的终端使用方法

新建一个入口文件 entry.js

执行打包:将入口文件 entry.js打包输出到dist/目录下,并命名为bundle.js

webpack ./entry.js ./dist/bundle.js

查看当前路径dist文件夹下可看到打包好的js文件。

主入口文件引入其他的模块(其他的js文件)会被统一打包成一个文件。

首先新建一个js文件,命名为module.js

然后在主入口文件entry.js引入模块module.js,次执行:

webpack ./entry.js ./dist/bundle.js

同样的方法4.0版本会发出警告,如下:

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

意思是需要指定开发模式,有 production 和 developement 两种。我们当然指定开发模式:

webpack --mode development index.js bundle.js

此时已经回归正常,不报错了。

(4.0差异说明结束)

 

查看./dist/bundle.js的内容会发现,两个文件的内容会被整合到了一起。

也可以引入css文件进行整合。但是需要安装使用loader插件:css-loader 和 style-loader,css-loader读取css, style-loader插入页面。(一次性安装多个插件可用空格符隔开)

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

引入css模块(文件)

require("!style-loader!css-loader!./style.css") // 载入 style.css

执行webpack可得到加载样式后的文件。

也可以不使用前缀引入:

require("./style.css") // 载入 style.css

但是执行项目时需要添加指令:

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

三、配置文件执行方法

除了使用终端的方法还可以通过配置文件来执行项目,配置好文件后通过输入 webpack 回车即可。

配置前需要在根目录创建package.json用来添加webpack的依赖文件。

可以手动建,也可以通过 npm init 来初始化项目配置信息。

输入y回车创建完成。当前目录下就会创建完成一个package.json文件。

项目配置文件有了,那么接下来需要新建webpack的配置文件:webpack.config.js (跟package.js配置的文件名称一样)

/* webpack.config.js */


module.exports = {
    entry: './entry.js',                 // 入口文件路径
    output: {
        filename: './dist/js/bundle.js',   // 打包输出地址
        path: __dirname                    // 指定当前目录
    },
    module: {                              // 引入的模块
        loaders: [
            {
                test: /\.css$/,                     // 用于绑定loader的源文件
                loader: 'style-loader!css-loader'   // 绑定style-loader 和  css-loader
            }
        ]
    }
};

终端输出 webpack 回车打包完成。

webpack

4.0配置规则的module规则(可能不对):

/* webpack.config.js */


module.exports = {
    entry: './entry.js',                 // 入口文件路径
    output: {
        filename: './dist/js/bundle.js',   // 打包输出地址
        path: __dirname                    // 指定当前目录
    },
    module: {                              // 引入的模块
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    // 'file-loader',
                    'url-loader'
                ]
            }
        ]
    }
};

 

 

四、使用插件

插件可以完成更多 loader 不能完成的功能。

插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

以 html-webpack-plugin 为例,这个插件可以生成新的html文件,并且可以压缩文件牙可以压缩内联css,移除注释等。

安装插件:

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

配置 webpack.config.js

/* webpack.config.js */

var htmlPlugin = require('html-webpack-plugin');


module.exports = {
    entry: './entry.js',                 // 入口文件路径
    output: {
        filename: './dist/js/bundle.js',   // 打包输出地址
        path: __dirname                    // 指定当前目录
    },
    module: {                              // 引入的模块
        loaders: [
            {
                test: /\.css$/,                     // 用于绑定loader的源文件
                loader: 'style-loader!css-loader'   // 绑定style-loader 和  css-loader
            }
        ]
    },
    plugins:  [                     // 引入插件的配置
            new htmlPlugin({
                minify: {                               // 压缩HTML文件
                    removeComments: true,              // 移除HTML中的注释
                    collapseWhitespace: true,          // 删除空白符与换行符
                    minifyCSS: true                     // 压缩内联css
                },
                template: './index.html',               // 模板源文件
                filename: './dist/index.html'           // 生成新文件的存放路径及名称
            }),
         ]
};

运行:

webpack

查看 ./dist/ 文件夹下,发现新增了一个index.html文件,并且是已经被压缩的文件,还有已经自动帮你引入了bundle.js。

 

五、热更新

监视检测文件修改自动进行编译压缩打包等操作。

需要安装插件: webpack-dev-server

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

但是这样安装会默认安装最新版本,最新版本的与当前使用的webpack3.6不兼容。所以应该安装与之兼容的版本。可选择 webpack-dev-serverd的2.9.7版本。可指定版本安装。

npm install webpack-dev-server@2.9.7 --save-dev

安装成功后执行 webpack-dev-server:


C:\Users\SmallBag\Desktop\study\webpack3.0>webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 81211f638f37651e9fed
Version: webpack 3.6.0
Time: 326ms
              Asset    Size  Chunks                    Chunk Names
./dist/js/bundle.js  330 kB       0  [emitted]  [big]  main
   [2] multi (webpack)-dev-server/client?http://localhost:8080 ./entry.js 40 bytes {0} [built]
   [3] (webpack)-dev-server/client?http://localhost:8080 7.95 kB {0} [built]
   [4] ./node_modules/url/url.js 23.3 kB {0} [built]
   [7] ./node_modules/url/util.js 314 bytes {0} [built]
   [8] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
  [11] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [12] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
  [13] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [14] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
  [15] ./node_modules/sockjs-client/dist/sockjs.js 181 kB {0} [built]
  [16] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [18] ./node_modules/html-entities/index.js 231 bytes {0} [built]
  [21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [23] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [25] ./entry.js 31 bytes {0} [built]
    + 11 hidden modules
webpack: Compiled successfully.

可以看到项目已经运行在服务器上面了,并且默认给你配置localhost:8080地址。

浏览器访问localhost:8080时,如果你的项目下有index.html文件的话,可以直接访问到index.html文件。如果没有的话可以访问到当前目录,如下图:

 

当然也可以给webpack-dev-server进行配置:

/* webpack.config.js */

var htmlPlugin = require('html-webpack-plugin');


module.exports = {
    entry: './entry.js',                 // 入口文件路径
    output: {
        filename: './dist/js/bundle.js',   // 打包输出地址
        path: __dirname                    // 指定当前目录
    },
    module: {                              // 引入的模块
        loaders: [
            {
                test: /\.css$/,                     // 用于绑定loader的源文件
                loader: 'style-loader!css-loader'   // 绑定style-loader 和  css-loader
            }
        ]
    },
    plugins:  [                     // 引入插件的配置
            new htmlPlugin({
                minify: {                               // 压缩HTML文件
                    removeComments: true,              // 移除HTML中的注释
                    collapseWhitespace: true,          // 删除空白符与换行符
                    minifyCSS: true                     // 压缩内联css
                },
                template: './index.html',               // 模板源文件
                filename: './dist/index.html'           // 生成新文件的存放路径及名称
            }),
         ],
    devServer:{                        // 配置信息
        host: 'localhost',             //可配置你想要的ip地址
        port: 8888,                     //可配置你想要的的端口
        contentBase:'dist',             //可配置服务器默认查找的目录,会在当前目录查找index.html
        compress: true //可选,压缩
    }
};

运行:

webpack-dev-server

此时,有文件修改时会自动更新

 

六、实现跨域

配置示例:

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {        // 跨域前缀,访问地址前加上此前缀可访问代理域名
        target: 'http://yourdomian.com/',        // 代理域名
        pathRewrite: {'^/api' : ''},    
        changeOrigin: true,     // target是域名的话,需要这个参数,
        secure: false,          // 设置支持https协议的代理
      },
      '/api2': {        // 可以配置多个域名代理
          .....
      }
    }
  }
};

 

 

注:不喜勿喷,欢迎讨论

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: html-webpack-plugin是一个用于生成HTML文件的webpack插件,它可以自动将打包生成的js和css文件引入到HTML文件中的合适位置。它的主要功能包括自动引入资源、自动注入脚本和样式、支持模版和变量等。但是,有时候我们可能需要寻找一些替代品来满足不同的需求或者提供更多的功能。 1. HtmlWebpackPlugin的替代品可以是html-loader。html-loader是一个处理HTML文件的webpack加载器,它可以将HTML文件解析为字符串,并将其中的资源路径指向打包后的文件。与HtmlWebpackPlugin相比,html-loader更加轻量级,只关注HTML文件的处理,不涉及其他功能。 2. 另一个替代品可以是webpack-html-plugin。它与HtmlWebpackPlugin类似,但是提供了更多的功能和定制选项。它支持动态生成多个HTML文件、自定义模版和变量、使用ejs、handlebars等模版引擎、自定义文件名等。webpack-html-plugin更加灵活,可以根据具体需求进行配置和定制。 3. 另外一个替代品可以是pug-loader。pug-loader是一个用于处理Pug模版的webpack加载器,它可以将Pug模版编译成HTML代码,并处理其中的资源引用和变量注入。与HtmlWebpackPlugin相比,pug-loader提供了更加强大的模版语法和功能,同时也是一个更加轻量级的解决方案。 总之,虽然HtmlWebpackPlugin是一个功能强大的webpack插件,但是在某些场景下我们可能需要使用一些替代品来满足不同的需求或者提供更多的定制选项。以上所提到的替代品仅仅是一些示例,实际上还有很多其他的插件或加载器可以用来替代H Htmlwebpack-plugin。 ### 回答2: html-webpack-plugin 是一个用于生成 HTML 文件的 webpack 插件。它能够根据配置创建一个空的 HTML 文件,并将 webpack 打包生成的 bundle 文件自动插入到这个 HTML 文件中。它还支持多个 HTML 文件的生成,并且可以根据不同的入口文件进行自定义配置。 虽然 html-webpack-plugin 非常方便实用,但也存在一些替代品可供选择。以下是一些常见的替代品: 1. HtmlWebpackPlugin 可以通过修改配置项来满足绝大多数需求,但有时候仍然存在一些局限性。在某些情况下,可以考虑使用其他更灵活的工具。 2. Pug(以前称为 Jade)是一种高性能的模板引擎,它可以与 webpack 集成使用。Pug 提供了丰富的模板语法和功能,可以方便地生成 HTML。与 HtmlWebpackPlugin 不同的是,使用 Pug 可以更灵活地控制生成的 HTML 结构和内容。 3. HtmlWebpackPlugin 的替代品之一是 html-loader。html-loader 可以将 HTML 文件作为模块处理,并允许您以编程方式编辑和修改 HTML 内容。这意味着您可以使用其他 webpack 加载器和插件来处理您的 HTML 文件,以实现更复杂的功能。 4. Nunjucks 是另一个强大的模板引擎,它具有类似于 Pug 的能力。您可以使用 nunjucks-loader 将 Nunjucks 与 webpack 集成,并通过配置对生成的 HTML 进行灵活的控制。 总结而言,HtmlWebpackPlugin 是一个常用且方便的 webpack 插件,但在一些特定的场景下,您也可以考虑选择其他替代品,以满足更灵活和个性化的需求。 ### 回答3: html-webpack-plugin是一个用于自动生成HTML文件的插件,可以根据配置生成带有引入打包后的JavaScript和CSS文件的HTML文件。它在Webpack构建过程中非常实用。 如果想要寻找html-webpack-plugin的替代品,可以考虑以下选项: 1. HtmlWebpackPlugin的替代品: - html-plugin: 一个类似的插件,可以在构建时生成带有引入打包后的资源的HTML文件。 2. Manual HTML文件生成: - 如果你不想使用插件,也可以手动创建HTML文件并手动引入构建后的资源。这种方法需要一定的手动操作,但是在简单的项目中可能更加适用。 3. 模板引擎: - 使用诸如EJS、Pug(以前的Jade)、Handlebars等模板引擎,可以将Webpack打包后的资源动态注入到HTML模板中生成最终HTML文件。模板引擎提供了更大的灵活性,可以根据配置和需求定制HTML文件的生成过程。 4. 生成器工具: - 另一种选择是使用专门的生成器工具,如Yeoman,它可以根据预设的模板和配置生成应用程序的骨架代码,其中包括自动生成HTML文件。 需要根据具体项目的需求和技术选型来选择最合适的替代品。以上只是一些常见的替代方案,具体选择应根据项目的复杂性、开发团队的技术熟悉程度和个人偏好来决定。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值