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(样式)文件时报错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文件node

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";