webpack常用指令
用 npm 安装 Webpack：
$ npm install webpack -g (全局安装)
$ npm install webpack --save-dev （本地安装）
$ npm info webpack ---- 查看 webpack 版本信息
$ webpack a.js b.js ----将打包到b
npm install css-loader style-loader ---安装 loader(Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换)
$ webpack --progress --colors --watch ----设置输出内容带有进度，颜色，并开启监听模块的变化
$ webpack --display-error-details ----打印错误信息
设置实时监听浏览器启动页面的变化并自动刷新页面：
# 安装
$ npm install webpack-dev-server -g
# 运行
$ webpack-dev-server --progress --colors
https://juejin.cn/post/6987691433276735502
安装方式
//npm init -y #初始化一个package.json
1.全局安装：
npm install --g webpack
2.本地安装
npm install --save-dev webpack
3.安装cli
npm install webpack webpack-cli -D #本地安装最新版`webpack`,`webpack-cli`
//npm info webpack #查看webpack历史版本信息
1.初始化项目
npm init ---成功后生成pakeage.json文件
2.在项目内安装webpack,webpack-cli：
npm install --save-dev webpack webpack-cli
3.配置webpack.config.json文件
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
mode: 'development'
}
4.package.json 里面的scripts配置文件添加打包参数， “build”: "webpack"
{
"name": "webpacktest2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
// "test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "lanfeng",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
}
}
5.执行npm run build，Webpack就会预先读取webpack.config.js，然后进行打包。
index.js 文件
import firstDemo from './add-first.js';
document.write(firstDemo);
add-first.js
const test = 'Hello Webpack'
export default test
index.html 文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>First</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
千锋
node -v
npm -v
pwd ---查看目前路径
npm install webpack webpack-cli --global ---全局环境安装
webpack -v
npm init -y ---成功后生成pakeage.json文件(注意name 中不能使用 大写字母、空格和中文)
npm install webpack webpack-cli --save-dev ---本地安装（成功后出现package-lock.json和node_modules文件）
点击项目名称右键->在集成终端中打开->输入webpack->生成dist文件
webpack --stats detailed ---查看详细打包信息
npm uninstall webpack webpack-cli --global ---卸载全局安装,卸载后持续`webpack`指令报错
npx webpack ---如果当前目录没有webpack向上级文件查找
自定义webpack配置
npx webpack -help ---查看目录结构
设置入口文件
npx webpack --wntry ./src/index.js --mode production //配置文件配置项目目录下新建webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
mode: 'development'
}
配置完后执行·npx webpack·---dist文件下出现bundle.js
验证---再index.html下添加<script src="./dist/bundle.js"></script>运行是否成功
标签：npm,--,js,---,webpack,install From： https://www.cnblogs.com/xinyu-yudian/p/16738781.html