保安日记：Webpack（一）

最新推荐文章于 2024-05-21 14:15:14 发布

VIP文章卓曉晖

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量210

点赞数

分类专栏： webpack 文章标签： javascript

本文链接：https://blog.csdn.net/Zhuo_De/article/details/109541070

版权

Webpack

官方文档：https://www.webpackjs.com/concepts/

全局安装webpack

cnpm install webpack webpack-cli -g

打包初体验

mkdir demo1
cd demo1
mkdir src
npm init -y  //-y会有一个默认的配置，可以快速生成一个package.json
cnpm install webpack webpack-cli --save-dev  //安装webpack的依赖

//前期准备1、新建一个data.json文件 随便写点数据
{
   
    "username":"Zhuo",
    "password":"xiao"
}
//前期准备2、在src里新建一个index.js文件，随便写点
import data from "./data.json"

function fn(){
   
    console.log(fn);
}
fn()
console.log(data);


//开发环境下打包 ，没有压缩会有很多注释
// webpack ./src/index.js -o ./dist/bundle.js --mode=development
//生产环境下打包 ，会经过压缩
// webpack ./src/index.js -o ./dist/bundle_production.js --mode=production

// webpack默认可以处理检js文件、json文件
// 生产环境下比开发环境多了压缩代码和代码混淆

打包操作

webpack ./src/index.js -o ./dist/bundle.js --mode=development

//运行完会生成一个dist文件夹，原先两个文件的依赖被打包成一个文件放在dist文件夹里
//新建一个html文件
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./dist/bundle.js/main.js"></script>
  </head>
  <body></body>
</html>
//运行完能在控制台发现打印的两条语句 就说明成功了

使用webpack配置文件打包

mkdir demo2
复制之前的data.json,index.js在src文件夹，index.html
新建一个webpack.config.js配置文件

//webpack.config.js
let path = require('path')
console.log(path.resolve(__dirname,'dist'));
module.exports ={
   
    //入口文件
    entry:"./src/index.js",
    output:{
   
        // 输出文件名称
        filename:"bundle.js",
        // 输出的路径
        // (绝对路径,名称)
        path:path.resolve(__dirname,'dist')

最低0.47元/天解锁文章

卓曉晖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
保安日记：Webpack（一）

Webpack官方文档：https://www.webpackjs.com/concepts/全局安装webpackcnpm install webpack webpack-cli -g打包初体验mkdir demo1cd demo1mkdir srcnpm init -y //-y会有一个默认的配置，可以快速生成一个package.jsoncnpm install webpack webpack-cli --save-dev //安装webpack的依赖//前期准备1、新建一个
复制链接

扫一扫