报错1:
The CLI moved into a separate package:webpack-cli
Would you like to install webpack-cli ( That will run npm install -D webpack-cli)( yes/No )
解决方案:
方案一:webpack 已经更新,webpack 4.0 之后 命令行单独分出一个包,webpack-cli,安装webpack-cli 包。
npm install webpack-cli -g
方案二:安装指定版本,如安装 2.4.1 版
npm install [email protected] -g
报错2:
Can not find module ’webpack/schemas/WebpackOptions.json’
解决方案:
方案一:返回文件的根目录,在根目录下运行,比如我的是 E:/webpack/app,应当在webpack 文件夹下运行 webpack,而不是在 app 下面运行。
webpack runoob1.js bundle.js
方案二:这篇文章写的很清楚 webpack Cannot find module ‘webpack/schemas/WebpackOptions.json’,但是中间有一个步骤错了,应该是先创建入口文件,再设置模式。
---------------------
作者:typeof null
来源:CSDN
原文:https://blog.csdn.net/zhang6223284/article/details/80221444
版权声明:本文为博主原创文章,转载请附上博文链接!
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
webpack Cannot find module 'webpack/schemas/WebpackOptions.json'
置顶 2018年04月24日 14:30:33 bai_riqiang 阅读数:5576
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bai_riqiang/article/details/80063774
最近安装webpack4新版本后,执行webpack报错,如图
当时我就懵逼了,按照目录我也找到webpack/schemas/WebpackOptions.json文件了
后来看了一下webpack4版本的文档:如下
创建项目
随便在一个盘新建一个文件夹webpacklx,用于存放我们的项目。
然后在命令行,切到webpacklx
npm init
可以直接 npm init -y
这里,要求设置很多选项,可以按项目情况配置也可以不填直接回车。完成后,我们发现文件夹中增加了package.json
文件,它用于保存关于项目的信息。
全局安装webpack-cli
webpack4版本,需要另外全局安装webpack-cli
npm install -g webpack-cli
设置模式
默认有production和development两种模式可以设置,因此我们尝试设为development模式,在命令行输入
webpack --mode development
创建入口文件
webpack4.x是以项目根目录下的'./src'
作为入口,创建src
文件夹,事实上webpack4.x
以'./src/index.js'
作为入口,因此我们在创建index.js文件,然后执行
webpack --mode development
这样便能够实现将'./src/index.js'
打包成'./dist/main.js'
。
注意:可以新建一个webpack.config.js 文件
里面加下面代码,就可以指定输入文件 main.js跟输出文件 bundle.js
const path = require('path')
module.exports = {
entry:path.join(__dirname, './src/main.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
}
}
然后控制台输入 : webpack --mode development
就可以了
不过每次都要输入这个命令,非常麻烦,我们在package.json
中scripts
中加入两个成员:
-
"dev":"webpack --mode development",
-
"build":"webpack --mode production"
以后我们只需要在命令行执行npm run dev
便相当于执行webpack --mode development
,执行npm run build
便相当于执行webpack --mode production
。
或者:webpack.config.js文件中加入下面一段话
module.exports = {
mode: 'production'
};
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------=================================================================================================
webpack4版本的安装和使用
2018年03月29日 15:01:36 yytoo2 阅读数:1639
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yytoo2/article/details/79742606
在跟随网上教程学习vue的时候,发现按教程的步骤运行webpack的时候会有报错。找了下资料,现将解决方法记录下来备忘
1. 首先还是在项目目录下运行cnpm install -D webpack,采取根目录安装,如果要选择全局环境安装,把D改为g即可
2. 如果此时运行webpack或者webpack -v 会得到以下报错:
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
这是因为webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli,所以除了 webpack 外,我们还需要安装 webpack-cli: cnpm install -D webpack-cli,也是采取根目录安装
3. 安装完webpack和webpack-cli后再运行webpack,但是还是出现了报错。
webpack4中需要指明使用哪种模式,development和production:webpack --mode development
同时,webpack4默认入口是src/index.js文件
4.结局以上问题后就可以了