webpack-dev-server

执行 cnpm run dev 报错： 解决方法： 现在使用webpack要同时安装webpack-cli这个包，才可以调用webpack和webpack-dev-server这些命令。 cnpm install webpack webpack-dev-server webpack-cli --save-dev 来源： https://www.cnblogs.com/wangyfax/p/12289636.html

安装这两个包 使用npm安装 webpack-dev-server html-webpack-plugin webpack.config.js 配置文件添加html-webpack-plugin插件 ... const HtmlWebpackPlugin = require('html-webpack-plugin'); const htmlWebpackPlugin = new HtmlWebpackPlugin({ template: 'path/to/file.html', // 输入文件 filename: 'path/to/file.html', // 输出文件 }); module.exports = { ... plugins: [ htmlWebpackPlugin // 添加插件 ], ... } webpack-dev-server 命令，在package文件中添加脚本命令。 --host x.x.x.x // 启动的ip地址 --port 3000 // 监听的端口号 来源： https://www.cnblogs.com/zhangyahan/p/11162092.html

　　webpack：前端资源加载或打包工具 　　资源：img　　js　　css　　json等 　　第一步下载： 　　　　npm install webpack@3.8.1 --save-dev（局部） 　　　　npm install -g webpack@3.8.1 （全局）全局部分开发/生产环境 　　webpack -v　　查看是否下载成功 　　先局部后全局（搜查文件） 　　如果报 webpack 不是内部指令，在局部安装一次 　　尽量保持全局和局部都安装 　　第二部： 　　　　打包js文件　　 　　　　指令：webpack a.js b.js　　(a.js代表打包入口，b.js代表打包出口文件) 　　　　如果我们只想使用 webpack 这个指令，就可以实现打包，需要配置 webpack.config.js 文件 　　　　webpack 会有一个默认的配置文件，叫 webpack.config.js 　　　　webpack.config.js的配置内容； 　　　　　　module.exports={ 　　　　　　　　entry:"",　　　　//被打包的文件路径 　　　　　　　　output:{　　　　//被打包的文件出口路径 　　　　　　　　　　path:"",　　//路径（在哪个文件下面） __dirname+"/文件名"　　（只能使用这个文件，当前路径下的 （不能使用 .

1 安装了这几个插件 3. 安装这个插件 4.创建src文件夹，建立index.js文件。在src同级建立index.html文件 5.创建webpack.config.js 6.npm install –g webpack, npm install –g webpack-dev-server 5. npm install webpack, npm install webpack-dev-server 在项目中再安装一遍 8.npm install babel-loader --save,npm install babel-core –save babel-loader要安装7.1.5版本的，8点几版本的不行，不知道为什么 9.webpack 生成bundle.js文件。 现在改变index.js文件中的内容，刷新浏览器，内容并没有刷新。因为bundle.js文件并没有改变，要想内容改变，必须再webpack生成一次bundle.js. 或者webpack --watch 命令，当index.js中内容改变，刷新浏览器就能刷新内容。 webpack-dev-server命令，当index.js中内容改变，不需要刷新浏览器，内容自动更新。 webpack-dev-server --contentbase src --inline --hot 去掉地址后的尾巴，也能实现上面的功能。

webpack 核心概念: Entry: 入口 Module:模块，webpack中一切皆是模块 Chunk:代码库，一个chunk由十多个模块组合而成，用于代码合并与分割 Loader:模块转换器，用于把模块原内容按照需求转换成新内容 Plugin:扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情 Output: 输出结果 webpack流程: 原文链接： 点我 webpack启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有Module.每找到一个Module,就会根据配置的Loader去找出对应的转换规则，对Module进行转换后，再解析出当前的Module依赖的Module.这些模块会以Entry为单位进行分组，一个Entry和其所有依赖的Module被分到一个组也就是一个Chunk。最好Webpack会把所有Chunk转换成文件输出。在整个流程中Webpack会在恰当的时机执行Plugin里定义的逻辑。 下面我们开始从零开始配置一个支持打包图片,CSS,LESS,SASS,支持ES6/ES7和JSX语法，并对代码进行压缩的webpack配置. 1. 最简webpack配置 首先初始化npm和安装webpack的依赖: npm init -y npm install --save-dev

前言：（面试让介绍webpack，你可以这么答）简单地说，Webpack其最核心的功能就是 解决模板之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并成一个JS文件（比如bundle.js） 。这个整个过程也常常被称为是 模块打包 。换句话说，Webpack是一个指令集合的配置文档，然后通过配置好的这些指令去驱动程序做一些指令要求要做的事情。而这些动作都是通过自己写的规则去做编译，而且通过JavaScript的引入（ import ）语法让Webpack知道需要它帮忙编译什么东西（比如Pug、Sass等等）。所以我们始终会有一个入口文件（比如 index.js ）注入那些Preprocess，让那些Preprocess可以通过这些入口文件的JavaScript让Webpack去根据相关的配置指令编译它，然后打包到一个出口文件中，比如 bundles.js 。 用vue-cli1/2搭建一个vue项目时，可以看到有很多关于webpack配置的文件。我们不需要知道那些繁琐的配置文件有什么作用，只需在控制台输入 npm run dev ，项目自动启动，我们就可以愉快的写业务代码了。 虽然vue-cli帮我们做好了一切，我们就能不用学webpack了吗？NoNoNo...现代前端工程师必备的技能就是模块化构建打包项目，不信去那些招聘网站的前端JD看看。废话不多说

webpack.config.js 只需要注意加大加粗的地方。 var webpack = require("webpack"); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:{　　　　　// 为每个入口都注入代理客户端 "index":[__dirname+'/src/js/index.js', 'webpack-dev-server/client?http://127.0.0.1:8080'] }, output:{　　　　　// 配合热编译服务器设置公共资源路径，但编译的时候需要移除。 publicPath : "http://127.0.0.1:8896/", path : __dirname + '/build/js', filename : '[name].js' }, plugins:[ new HtmlWebpackPlugin({　　　　　　 // 不能写为这种路径，但编译的时候需要写成这种路径 // filename : __dirname + "/build/spa.html",　　　　　　　// 由于热编译启动的服务器，所以设置了publicPath，所以这里需要写为相对路径这样才可以访问localhost:port/spa.html

一、创建package.json文件 npm init 一路回车，包文件创建成功。 二、安装react（--save 可以将依赖保存到包文件中） npm install react react-dom --save-dev 三、安装babel npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev 四、webpack相关 1、安装webpack npm install webpack --save-dev 2、项目搭建 我的项目目录如下： app内包含components、js、css、images等静态资源，main.js是入口文件，build是打包后的文件夹 这里需要创建配置文件webpack.config.js，大致内容如下： var path = require('path'); var webpack = require('webpack'); //var precss = require('precss'); //var autoprefixer = require('autoprefixer'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var