初识 NPM 及 webpack 包管理工具
程序员文章站
2022-03-13 12:35:17
...
初识 NPM 及 webpack 包管理工具
几个简单的命令
这里需要注意前面都需要加上 npm
| 基础命令 | 简写 | 实际作用 |
| —————— | —— | ——————— |
| --version
| -v
| 查看版本 |
| instal
| i
| 安装 |
| --save
| -S
| 部署到线上环境 |
| --save-dev
| -D
| 部署到开发环境 |
| -global
| -g
| 全局安装 |
使用 webpack 的简单步骤
- 初始化 npm
npm init -y
(-y 尽量带上,否则就需要逐项添加修改) - 安装 webpack、webpack 脚手架、webpack 服务器
npm i webpack webpack-cli webpack-dev-server --D
- 选择打包环境进行打包
webpack --mode development
(开发环境)webpack --mode production
(生产环境/线上环境)
webpack.config.js 配置
如果不使用 webpack.config.js 进行配置,那么每次运行时都要执行很长一段代码如:webpack ./src/index.js -o ./build/build.js --mode development
webpack ./src/index.js -o ./build/build.js --mode production
配置 webpack.config.js 后,只运行webpack
就能实现上面一段的效果,且里面可以配置更多项,来实现不同的入口文件、输出文件、规则配置、插件配置、模式等
//从path中获取resolve方法去获取目录
const { resolve } = require("path");
//引入html打包插件
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
//入口文件
//单文件
//entry: "./src/me.js";
//多文件
// entry: ["./src/me.js", "./src/index.js"],
//多文件输出到多文件
entry: {
vendor: ["./src/jquery.js", "./src/common.js"],
index: "./src/index.js",
cart: "./src/cart.js",
},
//输出
output: {
//单文件及多文件输出到一个文件中
// filename: "main.js",
//多文件生成到多个文件中
filename: "[name].js",
path: resolve(__dirname, "build"),
},
//引入loader
module: {
//写入规则
rules: [
{
//匹配哪些文件
test: /\.css$/,
//这里是从后往前写,先把css加到js中,再把js再加到html中
use: ["style-loader", "css-loader"],
},
{
//匹配哪些文件
test: /\.scss$/,
//这里是从后往前写,先把css加到js中,再把js再加到html中,这里是加载了一个sass的css预处理器,sass是一种专门的编程语言,可以有变量、函数
use: ["style-loader", "css-loader", "sass-loader"],
},
],
},
//插件,webpack默认只能打包js文件,打包其他的相如html、css、图片需要用到插件,下载=>导入=>使用
plugins: [
new HtmlWebPackPlugin({
//指定入口文件
template: "./src/index.html",
//指定出口文件
filename: "index.html",
//指定chunk
chunks: ["vendor", "index"],
//配置压缩项
minify: {
//去掉空格
collapseWhitespace: true,
//去掉注释
removeComments: true,
},
}),
new HtmlWebPackPlugin({
//指定入口文件
template: "./src/cart.html",
//指定出口文件
filename: "cart.html",
//指定chunk
chunks: ["vendor", "cart"],
//配置压缩项
minify: {
//去掉空格
collapseWhitespace: true,
//去掉注释
removeComments: true,
},
}),
],
//模式
mode: "development", //定义生产模式或者运行模式,
};
推荐阅读
-
vue项目用npm安装sass包遇到的问题及解决办法
-
webpack创建library及从零开始发布一个npm包
-
Vue2项目架构搭建(一)——npm、webpack安装及配置
-
webpack 构建 npm 包优化
-
webpack4配置之——24:细说webpack4打包及拆分代码
-
nodejs npm版本3把所有依赖包及子依赖包全部安装在node_modules根目录的问题
-
前端工程化:关于npm包管理的认知及发布一个包到npm上
-
webpack创建library及从零开始发布一个npm包
-
vue项目用npm安装sass包遇到的问题及解决办法
-
webpack 中使用 axios 方法总结及初识 vue