webpack-dev-server

安装webpack npm install webpack//安装webpack npm install --save-dev webpack//在项目中安装webpack npm init //创建package.json文件 配置 //package.json "scripts" : { "test" : "echo \"Error: no test specified\" && exit 1" , "dev" : "webpack-dev-server" , "build" : "webpack" } , 使用yarn： yarn init -y yarn add webpack webpack-cli -d//-d是开发环境配置打包后没有 npx webpack//打包后dist文件夹里形成app.js yarn add webpack-dev-server -d//安装运行工具 不使用yarn： npm i webpack-cli -g//全局安装 或者npm install webpack-cli --save-dev//正常安装 webpack hello.js -o hello.bundle.js//终端打包 运行 npm run dev (开发环境输出的demo.js没有压缩); npm run build (生产模式输出的demo.js压缩过);

webpack和webpack-dev-server的区别 第一， webpack 是构建 webpack-dev-server 除了构建，还提供web服务 第二， webpack.config.js的路径参数区别 entry都一样。 ouput不太一样。 path和webpack一起，构建后输出文件的位置，这是真实的物理地址。 publicPath和webpack-dev-server一起，当执行webpack-dev-server的时候，第一步首先跟webpack一样，先构建输出，然后提供web访问，这是该输出文件是在内存中 默认情况下不设置publicPath则输出文件默认运行在和webpack-dev-server的同级目录的，一般也就是根目录。如果设置了publicPath那么html中的引用也要相对改变。 如下面： 我改了publicPath 相应html中的路径也要改变 http://webpack.github.io/docs/webpack-dev-server.html 第三， webpack-dev-server 运行之后 1、先构建，输出文件在内存中，引用构建后的输出文件根据publicPath（默认是根目录），2、 每次修改，自动刷新 来源： https://www.cnblogs.com/nuoyiamy/p/6074756.html

首先要安装node 一、webpack 1、新建一个文件夹amazing，然后进入文件夹 命令行运行 npm init - y ( y -- 》代表yes ，省去了默认选项点击 ) 然后命令行中一顿回车 完成后，生成一个package.json文件 2、安装webpack和webpack-cli npm install webpack webpack - cli -- save - dev 3、在文件中创建src、public两个文件夹和webpack.config.js配置文件 ①、在子文件夹public中新建index.html(此文件为入口文件模板，注意是模板) ②、在子文件夹src内新建main.js文件(此文件为项目入口主js文件) ③、webpack-config.js const path = require ( 'path' ) ; module . exports = { entry : { app : './src/main.js' //需要打包的文件 } , output : { filename : 'bundle.js' , //输入的文件名是什么，dist里面生成的文件名也是什么 path : path . resolve ( __dirname , 'dist' ) //指定生成的文件目录 } } ; 4、安装webpack-dev-server