webpack 安装及基本使用及遇到的坑
2019-09-02 18:20
267 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/youlinhuanyan/article/details/100189808
坑1. 全局、本地安装webpack后,不能用,也不查看
坑2 . 使用
坑3 . 使用
安装webpack
step.1 全局安装webpack
$ cnpm install --save-dev webpack -g $ cnpm install --save-dev webpack-cli -g
step.2 配置webpack.config.js文件
//var path = require('path'); module.exports = { entry: __dirname + "/src/index.js",//已多次提及的唯一入口文件 output: { path: __dirname + "/dist",//打包后的文件存放的地方 filename: "bundle.js"//打包后输出文件的文件名 }, mode: 'development' // 设置mode }
使用打包命令
- 在配置了webpack.config.js文件后,可直接直接使用
$ webpack
- 可使用package.json 文件中,指定的脚本命令 见
坑2
使用过程中遇到的坑
坑1. 全局、本地安装webpack后,不能用,也不查看webpack -v
$ webpack src/index.js dist/bundle.js One CLI for webpack must be installed. These are recommended choices, delivered as separate packages: - webpack-cli (https://github.com/webpack/webpack-cli) The original webpack full-featured CLI. We will use "npm" to install the CLI via "npm install -D". Do you want to install 'webpack-cli' (yes/no): no You need to install 'webpack-cli' to use webpack via CLI. You can also install the CLI manually.
原因
webpack4,命令行相关的内容都移到 webpack-cli,所以还需要安装 webpack-cli,否则就出出上面的问题
解决办法
$ cnpm install webpack-cli -g
检查一下是否正常安装webpack
$ node -v v8.11.3 $ webpack -v 4.39.3 $ webpack-cli -v 3.3.7
坑2 . 使用 webpack src/index.js dist/bundle.js
报错
$ webpack src/index.js dist/bundle.js ... WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https ://webpack.js.org/configuration/mode/
原因
打包时,指令中没有指定mode选项,或配置文件中没有指定mode选项
解决办法.1
使用下面指令
$ webpack --mode pr 7ff7 oduction src/index.js dist/bundle.js
解决办法.2
使用webpackage.config.js配置入口及目录js,同时在package.json中的 script中,声明如下
webpackage.config.js
//webpackage.config.js //var path = require('path'); module.exports = { entry: __dirname + "/src/index.js",//已多次提及的唯一入口文件 output: { path: __dirname + "/dist",//打包后的文件存放的地方 filename: "bundle.js"//打包后输出文件的文件名 }, mode: 'development' // 设置mode }
package.json
//package.json "scripts": { "test": "echo \"no test function\"", "dev": "webpack --mode development", "build": "webpack --mode production" }
定义好后,直接使用package.json中定义的脚本
$ npm run build
or
$ webpack
坑3 . 使用 webpack --mode production src/index.js dist/bundle.js
报错
$ webpack ./src/index.js dist/bundle.js --mode production ... ERROR in multi ./src/index.js dist/bundle.js Module not found: Error: Can't resolve 'dist/bundle.js' in 'E:\bing_study\webpack__project' @ multi ./src/index.js dist/bundle.js main[1]
原因
webpack版本过高,原来的命令已经不适用了
解决办法
$ webpack ./src/index.js -o dist/bundle.js --mode production
相关文章推荐
- webpack的安装和基本使用
- Webpack的安装及基本使用方法
- windows下安装nodejs 、webpack及vue.js的基本使用<一>
- webpack的安装和基本使用
- webpack和webpack-dev-server安装配置(遇到各种问题的解决方法)
- webpack的安装和使用
- webpack的安装和使用
- webpack基本使用
- webpack安装和使用
- webpack 安装与使用教程
- webpack 的安装使用详解
- 使用npm安装webpack失败时,可能被墙要为cmd命令行设置代理
- webpack的安装与使用
- npm安装全局和局部包版本不同时,如何使用到局部包版本(举例webpack)
- 项目中使用webpack基本的配置
- webpack的基本使用
- webpack安装使用
- Webpack的安装和使用
- 前端自动打包工具webpack的安装和使用
- webpack(一) 安装使用