webpack4 安装

   第一次安装webpack4+,踩了些坑,首先必须得安装npm 国内建议cnpm,用淘宝镜像。其实和php的composer 差不多。

   按照官方的文档进行安装

   cnpm init -y 先初始化 配置文件

cnpm install --save-dev webpack
cnpm install --save-dev webpack@<version>  这个可以指定版本。不指定版本,默认时最新稳定版

cnpm install --save-dev webpack-cli  webpack-cli命令,4以后的版本,都必须要单独安装这个。

安装完之后你会发现你使用webpack的命令,提示不是内部命令。这这是因为我们是按装的是局部安装。如果全局安装会没问题。但是全局安装后,你以后所有的项目都会锁定到这个版本,
官方不建议全局安装。

那么是不是没安装成功的,不是是你安装成功了,但是因为是局部。他默认的安装到node_modules下的.C:wwwvue ode_modules.bin,这个根据你本地项目的目录。我的是这个目录。
你进入到这个目录下使用webpack-cli命令是可以的。这时你需要把这个路径设置到windows环境变量中

这样就没问题了。

简单说下配置,一个package.json 这里记录的都是一些依赖

{
"name": "vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack" //这个时配置你运行时的命令。比如现在我 运行 npm run dev就会进行打包编译
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}
}
还有一个时webpack.config.js

const path = require('path');

module.exports = {
entry: './src/main.js', //你的源码文件入口
output: { //打包好的文件路径和文件
filename: 'bundle.js', //打包好的编译文件
path: path.resolve(__dirname, 'dist') //打包好的目录
}
};

你上线后的引入的文件就是这个打包编译好的目录文件

大致就是这些
 
 
原文地址:https://www.cnblogs.com/hanyudanei/p/12875936.html