webpack5起步

最新推荐文章于 2022-11-21 17:55:52 发布

、昔年

最新推荐文章于 2022-11-21 17:55:52 发布

阅读量104

点赞数

分类专栏： webpack 文章标签： webpack webpack-cli

本文链接：https://blog.csdn.net/weixin_43760969/article/details/109093709

版权

webpack 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

webpack起步

安装weboack和webpakc-cli

// 先运行初始化package.json文件
npm init -y
npm install webpack webpack-cli --save-dev

项目的目录结构
index.html
- 1 原本使用的是script引入lodash，现使用webpack进行打包，在index.js中使用import引入
- 2 原本引入的是index.js，也就是没有经过打包的js文件，现在引入的是经过打包的bundle.js文件

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
  </head>
  <body>
    <!-- <script src="./src/index.js"></script> -->
    <script src="bundle.js"></script>
  </body>
</html>

index.js
- 通过import导入lodash模块，这样就不需要再html文件中通过script标签添加lodash

import _ from 'lodash'
function component() {
    var element = document.createElement('div');
  
    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  
    return element;
  }
  
  document.body.appendChild(component());

webpack.config.js（webpack配置文件）
- entry为打包入口，也就是需要进行打包的文件，这里指定为index.js
- output为输出的路径和文件名字，这里文件名为bundle.js，路径为当前绝对路径下的dist文件夹
- 需要注意的是，如果没有配置文件，使用默认的npx webpack进行项目构建的时候，是可以进行项目的构建的，不过默认生成main.js文件，这时候需要在index.html引入的是main.js文件而不是bundle.js文件

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

package.json
- 1 添加了private字段，表示加密
- 2 去除了默认的main字段
- 3 在script添加了build字段，build: webpack（只有添加了这一句，在终端才可以使用webpack run build进行打包）
  - 注意的是，如果没有添加配置文件和这个命令之前，只能通过npx webpack进行项目的构建

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": "true",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.1.0",
    "webpack-cli": "^4.0.0"
  },
  "dependencies": {
    "lodash": "^4.17.20"
  }
}

运行成功

在这里插入图片描述

、昔年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack5起步

webpack起步安装weboack和webpakc-clinpm install webpack webpack-cli --save-dev项目的目录结构index.html1 原本使用的是script引入lodash，现使用webpack进行打包，在index.js中使用import引入2 原本引入的是index.js，也就是没有经过打包的js文件，现在引入的是经过打包的bundle.js文件<!doctype html><html> &l
复制链接

扫一扫