webpack-dev-server

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，运行在服务器端。nodejs所携带的npm包管理命令可以方便的安装vue-cli, webpack, webpack-dev-server等命令，而这些命令是创建或者运行vue项目的基础。 1、安装nodejs 在http://nodejs.cn/download/下载nodejs的windows安装包，作者使用的版本是12.16 双击安装包，一直下一步直到完成 验证是否安装成功，打开命令行，输入以下命令 node -v 回车 v12.13.0 npm -v 回车 6.12.0 2、安装常用命令 打开命令行，输入以下命令 # 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org # 安装webapck cnpm install -g webpack # 安装webpack-dev-server cnpm install -g webpack-dev-server # 安装webpack-cli cnpm install -g webpack-cli # 安装vue-cli cnpm install -g vue-cli 以上，我们安装了nodejs，然后通过npm命令安装了后面强依赖的几个常用命令。 来源：

webpack 使用步骤 (最新版) 一、webpack 第一阶段 命名初始化阶段 项目名不能有汉字，不能取名叫 webpack 1、创建项目名称，并生成 package.json ， 命令 : npm init -y 2、安装 : npm i -D webpack webpack-cli webpack : 是 webpack 工具的核心包 webpack-cli : 提供了一些在终端中使用的命令 -D(--save-dev) : 表示项目开发期间的依赖，也就是 : 线上代码中用不到这些包了 3、创建一个 main.js 文件 console.log('我就要被打包了，哦也'); 4、在 package.json 的 scripts 中，添加脚本 // webpack 是 webpack-cli 中提供的命令， 用来实现打包的 // ./main.js 入口文件，要打包哪个文件 "scripts": { "build": "webpack main.js" }， 5、运行 : npm run build 6、设置开发状态 : mode "build" : "webpack ./main.js --mode development" // WARNING in configuration // The 'mode' option has not been set， webpack

前言 好了，上一篇我讲了怎么使用webpack来构建vue项目，接下将对它进一步完善，添加静态资源和代码校验及webpack-dev-server服务器，废话不多说，直接开始吧。 配置静态资源 安装 在配置之前，需要安装样式和文件资源处理的loader npm install style - loader -- save - dev npm install -- save - dev url - loader file - loader //url-loader是基于file-loader的 配置 module : { rules : [ { test : /\.css$/ , use : [ 'style-loader' , 'css-loader' ] } , { test : /\.(gif|jpg|jpeg|png|svg)/ , use : { loader : 'url-loader' , options : { limit : 1024 , // 每次输出文件的字节数的大小 name : '[name].[ext]' // 输出的文件类型 } } } ] } , css处理器 这里css处理器使用的是stylus，当然也可以使用其他处理器，可以根据个人习惯去更换，我这里使用它是因为它编写的样式简洁，容易阅读 安装 npm install stylus-loader

今天在执行npm run dev启动项目时遇到'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件。这个问题 开始我想着吧重新装 吧，就运行了：webpack-dev-server 可是装完之后会有很多的依赖都需要重装，有点心烦。。。 最后打开了万能的百度 找到了一篇不错的文章嘻嘻 第一种方法 尝试进行:cnpm install 而后重新执行：npm run dev 这里就成功运行了，如果还是不可以就尝试第二种方法，通常是没有装依赖导致的问题。 第二种方法 这种方法可以通过修改npm的配置文件让npm到另外的pacakge mirror站点去找package，执行如下命令： $ npm config set registry https://registry.npm.taobao.org $ npm config set registry http://r.cnpmjs.org 或者：npm config set registry http://registry.npmjs.eu 随后再执行 :cnpm install 然后就可以运行了啦！ 参考链接： https://blog.csdn.net/sunqy1995/article/details/81408517 最后的最后：写文章不容易啊，亲若是喜欢或者对你有帮助记得点赞+关注或者收藏呦

Webpack配置Vue项目 一. 基本配置 1. 在项目中安装和配置 webpack 使用webpack打包生成的文件就不会存在兼容性问题，可以使用es6的import语法 ① 运行 npm install webpack webpack-cli –D 命令，安装 webpack 相关的包 ② 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件 ③ 在 webpack 的配置文件中，初始化如下基本配置： 注：使用development开发模式打包不会混淆和压缩，编译快速 　　 使用生产模式会压缩和混淆代码，编译速度慢 module.exports = { mode: 'development' // mode 用来指定构建模式 } ④ 在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下： "scripts": { "dev": "webpack" // script 节点下的脚本，可以通过 npm run 执行 } ⑤ 在终端中运行 npm run dev 命令，启动 webpack 进行项目打包。 2. 配置打包的入口与出口 webpack 的 4.x 版本中默认约定：  　　打包的入口文件为 src -> index.js  　　打包的输出文件为 dist -> main.js

webpack webpack 可以打包项目用到的js和非js文件 但是每次修改 都需要手动执行打包命令 然后刷新浏览器页面 比较麻烦 webpack-dev-server 实现了项目自动打包功能 每次修改文件 会自动打包并生成 bundle.js (mian.js) 文件 然后刷新浏览器页面 1. 安装 webpack-dev-server npm i - D webpack - dev - server 2. 修改启动配置 打开 package.json 修改 scripts 下的 dev 为 webpack-dev-server "dev" : "webpack-dev-server" // 这里是修改dev 不是添加一个dev 3. 修改 index.html 的引用路径 webpack-dev-server 会把打包的js文件保存在内存中 使用 /bundle.js 来访问 修改 index.html 的 js脚本引用 路径 < ! -- < script type = "text/javascript" src = "../dist/bundle.js" > < / script > -- > < script type = "text/javascript" src = "/bundle.js" > < / script > 4. 运行 webpack-dev

webpack-dev-server webpack-dev-server 实际上相当于启用了一个 express 的 Http服务器+调用webpack-dev-middleware 。它的作用主要是用来伺服资源文件。这个 Http服务器 和 client 使用了 websocket 通讯协议，原始文件作出改动后， webpack-dev-server 会用webpack实时的编译，再用webpack-dev-middleware将webpack编译后文件会输出到内存中。适合纯前端项目，很难编写后端服务，进行整合。 webpack-dev-middleware webpack-dev-middleware输出的文件存在于内存中。你定义了 webpack.config，webpack 就能据此梳理出entry和output模块的关系脉络，而 webpack-dev-middleware 就在此基础上形成一个文件映射系统，每当应用程序请求一个文件，它匹配到了就把内存中缓存的对应结果以文件的格式返回给你，反之则进入到下一个中间件。 因为是内存型文件系统，所以重建速度非常快，很适合于开发阶段用作静态资源服务器；因为 webpack 可以把任何一种资源都当作是模块来处理，因此能向客户端反馈各种格式的资源，所以可以替代HTTP 服务器。 二者的区别仅在于 webpack-dev-server

下面的package.json文件中配置的webpack-dev-server为开发模式，可以使用http://localhost:8080或http://127.0.0.1:8080进行访问 "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "rimraf dist && cross-env NODE_ENV=production webpack --progress --hide-modules" }, 当需要远程访问时，需要在package.json中进行修改 "scripts": { "dev": "webpack-dev-server --host 192.168.31.79 --devtool eval --progress --colors --hot --content-base build", "build": "rimraf dist && cross-env NODE_ENV=production webpack --progress --hide-modules" }, 此时，仅可以通过http://192.168.31.79:8080进行访问，但是http://localhost:8080或http://127.0.0