webpack-dev-server

webpack-dev-server基本使用

1. 使用webpack-dev-server这个工具自动打包编译,运行npm i webpack -dev-server -D把这个工具安装到项目的本地开发依赖中去,安装完毕后这个工具的用法和webpack命令的用法完全一样
2. 由于webpack -dev-server是本地安装的，所以无法当作脚本命令在终端中直接运行（只有安装到全局-g的工具才能在终端中正常执行
3. 在package.json中的"scripts":加入代码

"dev": "webpack-dev-server"

4. npm run dev运行webpack-dev-server
5. webpack -dev-server这个工具如果想要正常运行，要求在本地项目中安装webpack
6. 将页面URL地址改为http://localhost:8080/src/可以看到项目的根目录
7. 将导入的js包从根目录引入（将原来的本地文件删除也是会有样式）,浏览器会自动刷新样式，保持与更改的实时一致

8. webpack-dev-server帮我们打包生成的bundle.js 文件并没有存放到实际的物理磁盘上，而是直接托管到了电脑的内存中，所以项目根目录中找不到这个打包好的bundle.js,可以认为webpack-dev-server把打包好的文件以一种虚拟的形式托管到了项目的根目录中

---

webpack -dev-server的常用命令参数

1. --open自动打开浏览器（不用手动点击终端中出现的链接http://localhost:8080/）（在package.json中操作）

"dev": "webpack-dev-server --open",

2. --port设置端口

"dev": "webpack-dev-server --open --port 3000",

3. --contentBase设置默认打开路径，设置直接打开src 可以直接展示index界面

"dev": "webpack-dev-server --open --port 3000 --contentBase src",

4. --hot热更新

"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot",

5. 配置devServer第二种方式

const path=require('path')
const webpack=require('webpack')//启用热更新 第二步
module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
     path:path.join(__dirname,'./dist'),
    filename:'bundle.js'},
    devServer:{
        open:true,//自动打开浏览器
        port:3000,//设置启动端口
        contentBase:'src',//指定托管的根目录
        hot:true,//启用热更新 第一步

    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()//new 一个热更新的模块对象，启用热更新 第三步

    ]
}

---

html-webpack-plugin

1. 下载html-webpack-plugin插件

npm i html-webpack-plugin -D

2. 导入内存中生成的HTML页面的插件

const htmlWebpackPlugin=require('htmlWebpackPlugin')

3. new htmlWebpackPlugin 创建一个内存中生成的HTML插件
4. template 指定 模板页面 将来会根据指定的页面路径去生成内存中的页面
5. filename 指定生成页面的名称

 plugins: [
    new webpack.HotModuleReplacementPlugin(),//new 一个热更新的模块对象，启用热更新 第三步
    new htmlWebpackPlugin({
        template: path.join(__dirname,'./src/index.html'),
        filename:'index.html'
    })
]

6. 当使用html-webpack-plugin之后，不需要手动处理bundle.js的引用路径，这个插件已经自动创建一个合适的script标签，并且引用正确的路径

---

loader

1. 使用import导入css样式表（在main.js中）

import './css/index.css'

2. webpack默认只能打包处理js类型的文件，无法处理非js文件,如果要处理非js文件，要手动安装一些合适的第三方loader加载器
3. 如果要处理css文件需要安装loader

npm i style-loader css-loader –D

4. 打开webpack.config.js配置文件，在里面新增一个配置节点，叫module(用于配置所有第三方模块加载器) 他是一个对象，在这个对象上有一个rules属性，存放了所有第三方文件匹配和处理规则
5. 配置处理.css文件的loader规则

module: {
    rules: [
        {text:/\.css$/,use:['style-loader','css-loader']},
    ]
}

---