webpack加载器和自动打包工具

自动打包（开发时的打包）

我们在使用webpack打包的时候每写一段代码都得打包一次，并且删除之前打包好的dist文件夹才能够测试效果。非常不方便。所以我们需要一个能够自动打包的工具

这个东西叫做webpack-dev-server。

1. npm install --save-dev webpack-dev-server--->安装资源包
2. 配置
3. webpack 启动 换成 webpack-dev-server 启动
4. 启动以后不能直接使用，他并不会帮我们把dist文件夹更新在硬盘，而是存放在内存中
- 1. 并且他启动的web服务是以项目根目录作为根目录，并不是dist文件夹
- 2. 因此我们要在webpack.config.js文件中配置webpack-dev-server
- 3. 我们可以在webpack文档中的开发中找到devServer.contentBase查阅并配置

//开发服务配置webpack-dev-server
    devServer:{
        //配置以这个文件路径作为web服务的根路劲
        contentBase:path.resolve(__dirname,'./dist')
    }
- 4. 配置npm的脚本，找到package.json文件在scripts对象中填写
- "dev":'webpack-dev-server'---开发时启动服务使用：npm run dev
- "build":'webpack'----打包时使用命令：npm run webpack
"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack"
  },

###. 引入模块的方式去引入css(样式)文件时报错

- 在index.js文件中引入css文件的时候，因为webpack打包只认识js文件，图片，css，字体这些都不认识，所有先把css转换成webpack认识的东西

- 可以在官方文档的 指南 管理资源 加载css里面查阅文档

- css-loader 对css文件做转换 转换成 webpack所能识别的模块css文件（会转化成js文件）

- style-loader 对上一步转换之后的 css模块文件再做解析，解析到页面的 style 标签中去。

 

1. npm install --save-dev css-loader style-loader
2. 配置
3. //加载器
module:{
//定义加载器的规则
rules:[
{
test:/.css$/,//用正则的方式找到匹配的模块
//注意这个加载器书写时有顺序，必须倒叙写，第一步骤写在最底下
use:[
'style-loader',
'css-loader'
]//使用什么加载器去处理这个模块
}
]

 sass加载器需要安装sass-loader和node-sass，同时要配置webpack.config.js文件

1.npm install --save-dev sass-loader node-sass

2.配置

//加载器
    module:{
        //定义加载器的规则
        rules:[
            {
                test:/.css$/,//用正则的方式找到匹配的模块
                //注意这个加载器书写时有顺序，必须倒叙写，第一步骤写在最底下
                use:[
                    'style-loader',
                    'css-loader'
                ]//使用什么加载器去处理这个模块
            },
            {
                test:/.scss$/,
                use:[
                    'style-loader',//最后通过style-loader写到 网页上去
                    'css-loader',//将css文件转换成webpack认识的模块文件
                    'sass-loader'//将sass文件转换成css文件
                ]
            }
        ]

    },
3.在入口js文件中引入sass文件

import "./style/sassDome.scss";