Webpack 安装和案例

Reads: 1111 Edit

1.全局安装

1 安装webpack

安装最新版本
npm install --global webpack

或者 安装特定版本
npm install --global webpack@version

QQ截图20200222220152

2 还需要安装CLI，才可以使用webpack命令行

npm install --global webpack-cli

可通过 npm root -g 查看全局安装目录

安装好后，输入 webpack -v 查看webpack 的版本。

3 安装VS Code 插件 VSCode中 安装插件 Node Snippets ,有代码快捷提示。

11629

2 快速入门

2.1 打包js模块

  1. 创建以下目录结构和文件

18

2 bar.js文件内容如下

// node 模块化编程，导出函数
module.exports = function(){
    console.log("我是bar模块");    
}

3 main.js文件内容如下

var bar = require("./bar") //可省略 .js
bar() //调用bar.js中的函数

//document.write("hello webpack")

4 node运行js模块，注意命令执行所在目录

QQ截图20200223024036

5 在index.html文件中引入main.js , 如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script src="./js/main.js"></script>
</body>
</html>

6 访问index.html，欧兰器无法识别JS模块化文件

1024455

7 打包js 命令 webpack模块入口路径 -o 模块出口路径

webpack ./js/main.js -o ./js/bundle.js

注意 webpack : 无法加载文件 D:\nodejs\node_global\webpack.ps1，因为在此系统上禁止运行脚本。 在通过vs code 运行webpack进行打包时，报错webpack : 无法加载文件 D:\nodejs\node_global\webpack.ps1，因为在此系统上禁止运行脚本。 解决方案：

以管理员身份运行vs code
执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的
执行：set-ExecutionPolicy RemoteSigned
这时再执行get-ExecutionPolicy，就显示RemoteSigned

8 将 index.html引入的js文件改为打包之后的bundle.js，浏览器可以识别的js目标文件

2223034140

9 方法浏览器访问 index.html后，按F12控制台正常输出

2.2 改造文件目录

1 改造文件目录和文件的划分，划分为src和dist目录

  • 把源码存储到src目录中
  • 把打包后的结果存储到dist目录中

334622

2 打包js

webpack ./src/main.js -o ./dist/bundle.js

3 修改index.html

QQ截图20200223035857

4 方法浏览器访问 index.html后，按F12控制台正常输出

2.3 打包配置文件 webpack.config.js

每当修改js文件内容后，都要webpack重新打包，打宝石需要制定入口和出口比较麻烦，可以通过配置解决。 1 在目录下创建webpack.config.js配置文件，该文件与src处于同级目录

//引用Node.js中的path模块，处理文件路径的小工具
const path = require("path");

// 导出一个webpack具有特殊属性配置的对象
module.exports = {
    //入口
     //入口模块文件路径
    entry:  './src/main.js' ,
    //出口是对象
    output: {
        //path是一个绝对路径，__dirname 是当前js的绝对路径
        path: path.join(__dirname , "./dist/"), //打包的结果文件存储目录
        filename : "bundle.js"  //打包的结果文件名
    }
}

2 打包js

webpack
或者
webpack --config ./webpack.config.js

总结：读取当前目录src文件家中的main.js(入口文件)内容，把对应的js文件打包，打包后的bundle.js文件放入当前目录的dist文件夹。

3 解决

4 修改 index.html

QQ截图20200223051359

  1. 实验 运行 npm init命令，然后修改 package.json 文件

111538

修改 scripts下的build节点对应的信息，修改后输入

npm run build

和webpack实现同样的功能

关于作者

王硕，网名信平，十多年软件开发经验，业余架构师，精通Java/Python/Go等，喜欢研究技术，著有《PyQt 5 快速开发与实战》《Python 3.* 全栈开发》，多个业余开源项目托管在GitHub上，欢迎微博交流。

Comments

Make a comment

www.ultrapower.com ，王硕的博客，专注于研究互联网产品和技术，提供中文精品教程。 本网站与其它任何公司及/或商标无任何形式关联或合作。
  • Index
aaaaa