webpack 入门学习笔记1

最新推荐文章于 2024-08-14 15:45:18 发布

万事屋的阿银

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量131

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_41199601/article/details/106613410

版权

序章

创建一个空目录，作为本次尝试的demo
首先需要安装webpack以及webpack-cli，这里推荐全局安装，否则会有各种奇怪的问题，十分奇葩。

首先要全局安装这两个东西：
npm install webpack -g
npm install webpack-cli -g
其次还有在当前目录下局部安装（不是很懂，但是需要，否则后面npm启动时会很麻烦）：
npm install webpack --save-dev
npm install webpack-cli --save-dev

在当前目录下使用npm init命令，会看到生成一个package.json文件，以及依赖包node_modules目录。
在当前目录下搭建结构：
（1）创建一个app目录，作为开发源码的存放地。
（2）创建一个public目录，作为打包后的输出地。
在punlic下创建一个index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>webpack demo</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

在app目录下创建main.js作为入口文件，然后可以再创建一个用来输出一些东西的greet.js文件（作为是否打包成功的效果查看）。
（1）main：

const greeter = require('./Greeter')// 这里主要是引入输出的js
document.querySelector('#root').appendChild(greeter())

（2）Greeter:

// 打印一个hello world
module.exports = function () {
  var greet = document.createElement('div')
  greet.textContent = 'Hello World'
  return greet
}

最后在根目录下创建一个webpack.config.js用来配置webpack即可：

// 其中__dirname是node环境下的变量，指向的是命令运行的目录
// 其中entry即指向的需要打包的入口文件
// output即是打包后的输出文件，可以顾名思义
module.exports = {
  entry: __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public", 
    filename: "bundle.js"
  }
}

到这里基本上简易配置就完成了，直接在根目录下运行webpack即可看到打包完成，并输出到public目录下的一个bundle.js的文件中。
当然，这样有些不方便，可以在最开始init出来的package.json中的script下配置npm运行方式："start": "webpack"

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack": "^4.43.0"
  },
  "devDependencies": {
    "webpack-cli": "^3.3.11"
  },
  "scripts": {
    "start": "webpack"
  },
  "author": "",
  "license": "ISC"
}

这样就可以直接执行npm start来直接打包了。

万事屋的阿银

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 入门学习笔记1

序章创建一个空目录，作为本次尝试的demo首先需要安装webpack以及webpack-cli，这里推荐全局安装，否则会有各种奇怪的问题，十分奇葩。首先要全局安装这两个东西：npm install webpack -gnpm install webpack-cli -g其次还有在当前目录下局部安装（不是很懂，但是需要，否则后面npm启动时会很麻烦）：npm install webpack --save-devnpm install webpack-cli --save-dev在当
复制链接

扫一扫