Webpack

Webpack

WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)

安装
npm install webpack -g
npm install webpack-cli -g
# 查看安装是否成功
webpack -v
配置

创建webpack.config.js配置文件

  • entry：入口文件，指定webpack用哪个文件作为项目的入口
  • ouput：输出，指定webpack把处理完成的文件放置到哪个位置
  • module：模块， 用于处理各种类型的文件
  • plugins：插件， 如：热更新、代码重用等
  • resolve：设置路径指向
  • watch：监听， 用于设置文件改动后直接打包
#打包
webpack
使用webapck

  1. 创建一个项目

  2. idea打开，项目下创建modules文件夹

  3. modules下创建hello.js

    exports.sayHi = function () {
    document.write("<h1>你好</h1>")
}

  4. modules下创建入口文件main.js

    let hello = require("./hello");
hello.sayHi();

  5. 根目录下创建webpack.config.js文件，名字必须是这个

    module.exports = {
    entry: './modules/main.js',
    output: {
        filename: "./js/bundle.js"
    }
}

  6. 根目录下创建index.html文件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--引入webpack后的js文件-->
<script src="/dist/js/bundle.js"></script>
</body>
</html>

  7. 运行命令webpack

    idea中wepack失败，webpack : 无法加载文件 C:\Program Files\nodejs\webpack.ps1

    解决命令：set-ExecutionPolicy RemoteSigned

posted @ 2022-01-12 09:29  jpy  阅读(11)  评论(0)    收藏  举报