首页 > 编程学习 > 前端webpack初识(marksehng)

前端webpack初识(marksehng)

发布时间:2023/1/25 12:42:33

安装步骤    

1.npm init               npm init -y    //没有过程选择

2.安装webpack webpack-clicli是可以让我们在命令行中使用webpack

     npm install webpack webnpm pack-cli -D

3.npx指令会从当前目录中查找webpack

npx webpack -v    //查找当前目录的webpack版本
npm webpack -v    //查找全局目录的webpack版本

4.查找包版本

npm info 包名

5.添加一些基本js文件(简单命令:px webpack   ./文件名)   

路径要写对

6.翻译不方便,所以添加webpack.config.js配置文件,并且做基本的配置。

 

const path = require('path');entry: {//名字随便添加main: './index.js',	//入口文件
},    //打包入口
//输出目录
output: {chunkFilename: '[name].chunk.js',	//非入口文件名称// publicPath: 'scripts/',  //在页面引用js的时候在前面加上这个路径filename: '[name].js',  //生成的文件名,[name]是在entry中定义的key值,也可以使用[hash]占位符path: path.resolve(__dirname, '../dist') //打包路径,__dirname是webpack.config.js这个文件所处的文件夹
}现在可以通过如下命令来进行打包。npx webpack --config ./webpack.config.js
npx webpack	//可以省去后面的--config配置,因为会自动识webpack.config.js配置文件为了万一使用`npm webpack`使用全局`webpack`打包并且规范化,所以需要将这个指令添加至`package.json`里的`scripts`中。"scripts": {"build": "webpack"
}最后可以使用`npm run build`命令来运行。

标题

 


本文链接:https://www.ngui.cc/el/2883536.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000