项目自动化构建工具 - webpack

最新推荐文章于 2023-06-13 09:12:46 发布

master'z

最新推荐文章于 2023-06-13 09:12:46 发布

阅读量258

点赞数

分类专栏：前端文章标签： webpack 项目自动化构建工具

本文链接：https://blog.csdn.net/ZXW_Future/article/details/99503354

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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': {        // 可以配置多个域名代理
          .....
      }
    }
  }
};

注：不喜勿喷，欢迎讨论

master'z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
项目自动化构建工具 - webpack

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。多个引入的模块打包成为一个文件。webpack认为每一个文件都是一个模块，包括：js，css, less, json等等。当前博文使用的是 webpack3.6.0 版本，会对比当前最新版本 4.39.1的差异。一、安装webpack首先全局安装webpack...
复制链接

扫一扫

专栏目录