webpack和webpack-dev-server安装配置(遇到各种问题的解决方法)
跟着Webpack傻瓜式指南(一)这个教程在安装webpack和webpack-dev-server的时候遇到很多问题,查了很多终于一一找到解决办法。
主要参考了这三篇博文:
moudule.js:338 throw err; Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
创建Webpack简单项目遇见的那些事儿
webpack-dev-server 使用方法,看完还不会的来找我~
看到网上很多人也遇到同样这些问题,特写这篇博文,简要总结安装过程并穿插问题解决办法,希望能给大家带来一些帮助。
安装配置步骤:
1. 装好node和npm
2. 全局安装webpack
npm install -g webpack
3. 建立项目,进入项目根目录
- a. 新建一个package.json的文件在项目根目录下
npm init
- b. 添加webpack.config.js配置文件
- c. 添加app文件夹,内含2个js文件
sub.js
//我们这里使用CommonJS的风格
function generateText() {var element = document.createElement('h2');element.innerHTML = "Hello h2 world";return element;
}
module.exports = generateText;
index.js
var sub = require('./sub');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(sub());
document.body.appendChild(app);
4. 配置Webpack
a. 安装html-webpack-plugin,快速生成HTML
npm install html-webpack-plugin --save-dev
可在项目根目录下安装(不加-g,在项目根目录出现node_modules文件夹,内含html-web-pack-plugin及其依赖包),也可全局安装(加-g 必须sudo)b. 写webpack.config.js配置文件中的内容
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');module.exports = {//项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字entry: APP_PATH,//输出的文件名 合并以后的js会命名为bundle.jsoutput: {path: BUILD_PATH,filename: 'bundle.js'//将app文件夹中的两个js文件合并成build目录下的bundle.js文件},//添加我们的插件 会自动生成一个html文件plugins: [new HtmlwebpackPlugin({title: 'Hello World app'})//在build目录下自动生成index.html,指定其title],
};
5. 在项目根目录运行webpack
webpack
- a. Error: Cannot find module 'webpack/../../.....'
- 解决1:在本项目中安装webpack:
npm install webpack
- 解决2:修改环境变量
touch ~/.bash_profile
vim ~/.bash_profile
- 修改打开的.bash_profile文件:
export NODE_PATH="/usr/local/lib/node_modules"
- 使修改生效
source ~/.bash_profile
- 解决1:在本项目中安装webpack:
- b. 若命令为
webpack --watch
,动态监听文件的改变并实时打包,输出新bundle.js文件;但不能做到hot replace,即每次webpack编译之后,还需手动刷新浏览器
6. 配置webpack-dev-server:
- a. webpack-dev-server简介:
- 是一个小型node.js express服务器
- 新建一个开发服务器,可以serve我们pack以后的代码,并且当代码更新的时候自动刷新浏览器
- 启动webpack-dev-server后,你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。
- 两种自动刷新方式:
- iframe mode
在网页中嵌入了一个 iframe ,将我们自己的应用注入到这个 iframe 当中去,因此每次你修改的文件后,都是这个 iframe 进行了 reload
命令行:webpack-dev-server
,无需--inline
浏览器访问:http://localhost:8080/webpack-dev-server/index.html - inline mode
命令行:webpack-dev-server --inline
浏览器访问:http://localhost:8080
- iframe mode
b. 安装webpack-dev-server
npm install webpack-dev-server --save-dev
可在项目根目录下安装(不加-g,在项目根目录出现node_modules文件夹,内含webpack-dev-server及其依赖包),也可全局安装(加-g 必须sudo)- c. 在webpack.config.js中添加配置
var webpack=require('webpack');
module.exports = {……devServer: {historyApiFallback: true,inline: true,//注意:不写hot: true,否则浏览器无法自动更新;也不要写colors:true,progress:true等,webpack2.x已不支持这些},plugins:[……new webpack.HotModuleReplacementPlugin()]……
};
- d. 在package.json里配置运行的命令(npm支持自定义一些命令)
"scripts":
{ "start": "webpack-dev-server --inline"//注意:不写--hot,否则浏览器无法自动更新
},
- e. 运行server
npm start
- Error: .........(此处省略一堆错误)
- 解决:在本项目中安装webpack:(不加-g,在项目根目录出现node_modules文件夹,内含webpack及其依赖包)
npm install webpack
- 浏览器打开http://localhost:8080/
成功运行,且修改app中的js代码,浏览器会自动刷新!成功!
转载于:https://www.cnblogs.com/xuehaoyue/p/6410095.html
webpack和webpack-dev-server安装配置(遇到各种问题的解决方法)相关推荐
- SQL Server 2008 R2 SSRS 安装配置后无法使用问题的解决方法
SQL Server 2008 R2 SSRS 安装配置后无法使用问题的解决方法 参考文章: (1)SQL Server 2008 R2 SSRS 安装配置后无法使用问题的解决方法 (2)https: ...
- QT安装配置之no suitable kits解决方法
打开 manage kits界面,选中一个kit,检查其参数.我便是因为debugger参数未选择使kit无法使用,手动选择一下即可. 如果还不行,可以检查一下环境变量,Qt5.14.0\5.14.0 ...
- 安装node.js、webpack、vue 和vue-cli 以及安装速度慢/不成功的解决方法
安装node.js.webpack.vue 和vue-cli 以及安装速度慢/不成功的解决方法 参考文章: (1)安装node.js.webpack.vue 和vue-cli 以及安装速度慢/不成功的 ...
- 安装SQL Server 2005时,出现“SQL Server 服务无法启动。……”提示的解决方法
安装SQL Server 2005时,出现"SQL Server 服务无法启动.--"提示的解决方法 上午在自己XP SP3电脑上安装SQL Server 2005时出现如下提示: ...
- 安装mysql配置时出错_mysql安装时出现各种常见问题的解决方法
小编为大家整理许多mysql安装时出现各种常见问题的解决方法,供大家参考,具体内容如下 问题一: 当各位在安装.重装时出现could not start the service mysql error ...
- 如何解决使用webpack打包之后,font-awsome路径不对的问题,终极解决方法
如何解决使用webpack打包之后,font-awsome路径不对的问题,终极解决方法 参考文章: (1)如何解决使用webpack打包之后,font-awsome路径不对的问题,终极解决方法 (2) ...
- 在电脑上安装不同版本的Java JDK的配置 javajdk版本无法切换解决方法
在电脑上安装不同版本的Java JDK的配置 javajdk版本无法切换解决方法 1. 下载jdk 2. 安装 2. 1注意:对于安装版的Java的额外操作 3. 配置环境变量 4. 测试 5. 不能 ...
- Windows 2012 安装windows server backup时发生错误0x80070422 的解决方法
Windows 2012 安装windows server backup时发生错误0x80070422 的解决方法 错误代码0x80070422是由于系统更新服务出错而引起的错误,具体的原因可以从以下 ...
- Linux下安装mysql后无法启动的解决方法
在Linux下安装完mysql后,mysql服务无法启动,总是failer. 这个不是因为mysql安装失败,而是因为启动了SELinux. 进入/etc/selinux/co ...
- (转)SQL Server数据库复制错误的原因及解决方法
在使用SQL Server数据库中,有时在复制时会出现错误,下面就为你分类介绍SQL Server数据库复制错误的原因及解决方法,希望对您学习SQL Server数据库有所帮助. 错误 消息 MSSQ ...
最新文章
- 【C++】C/C++ 中的单例模式
- c语言输入函数有什么作用,c语言的输入函数有哪些
- 第一回写的用arraylist模拟栈操作
- UVALive 4216 	 Pole Position
- Keepalived+nginx实现高可用负载均衡
- Vb.Net实现图片合并(相框效果)
- python中序列(列表list和元组tuple)的用法
- Spring中使用byType实现Beans自动装配
- 2014_hitcon_stkof学习
- DataSet-如何优雅使用DataSet,看完此篇文章完全理解C7N/choerodon/猪齿鱼 UI中的DataSet
- Windows 安装字体后,程序仍然提示找不到字体的解决办法——为所有用户安装字体
- day18私有化、关联、继承
- startwith的使用方法
- 前端自适应图片留白解决
- iPad 手指触摸与PC鼠标事件
- 基于php和mysql实现的简易民航订票系统实验
- 2015阿里系统工程师面试经验分享(广州站)
- lbaas l7 policy
- 数据手册中最小值、最大值、典型值三者之间的关系
- js如何获取jwt信息_企业舆情要怎么获取,如何处理负面舆情信息?
热门文章
- jQuery(2)——如何使用jQuery回显数据
- python配置文件注释_python操作配置文件yaml
- 以太坊 Solidity 函数返回(returns)多个值 和 接收方式
- Hyperledger Fabric ./byfn.sh -m up -s couchdb Error peer0.org1 failed to join the channel
- python多态如何理解_大家对python中多态是如何理解的?
- $.ajax(0,jQuery Ajax显示0而不是Array(jQuery Ajax showing 0 instead of Array)
- matlab 算法转 c语言,matlab
- vue基础知识点思维导图
- spring boot Junit5单元测试
- Process finished with exit code 1