webpack模块化开发（二）

主题 - css加载器 & 自动打包+浏览器自动刷新 & 优雅降级

css加载器

在webpack模块化开发中默认只支持js文件，其它的文件，比如css,leass,sass.....都需要用到加载器(loader)

配置loader：

对css进行转换

npm install style-loader  css-loader -D

在package.json查看是否已经安装成功，成功安装如下：

 在index.js文件下用以下语句引入：（从右到左读，但是要从左到右写）

require('style-loader!css-loader!./assets/css/a.css');

执行 webpack -p 打包后会将css样式渲染

拓展：初级手动配置webpack

1.新建webpack.config.js文件并加入以下配置:

let path = require('path');

module.exports = {

    entry: './src/index.js', //入口文件

    output: { //默认输出到dist

        path: path.resolve(__dirname, 'dist'), //指定编译目录 不写默认指定到dist

        filename: 'js/main.js', //出口文件路径

    },

    module: {

        rules: [

            //以.css结尾的文件 css加载器 - use内排名分先后

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

        ],

    },

    //配置环境

    mode: 'development' // | production

}

在module的rules中已经添加了css加载器，所以index.js中的代码可以转变如下，直接引用就可以了。

，

由于webpack.config.js中设置了mode，所以只需要webpack就可以打包了。

注意事项: webpack.config.js配置的时候，正则不需要加引号。

如果多个出入口配置如下：

webpack -w 自动监听开发环境下的文件的更改并打包到dist目录文件下去 --- 自动打包

浏览器自动刷新 -  webServer 搭建前端开发服务器

安装:cnpm install webpack-dev-server -g(全局安装)

（将开发的项目全部打包到计算机内存中，内存中会生成一个类似于dist目录的结构，然后浏览器检测到变化后会自动刷新）：出现以下就安装成功啦！

在webpack.config.js中配置一下虚拟目录如下：

在终端输入:webpack-dev-server后会出现以下：

在浏览器中输入http://localhost:8081就可以了，更改css文件中的样式可以最直观的看到效果,同时终端中会出现以下信息显示成功

自动打开浏览器并更新：

1-1

webpack-dev-server --port 8001 --open

如果不想手动写这么长的命令，那么在package.json文件中配置一下就可以使用npm start来替代以上的命令啦！

1-2:

输入命令：webpack-dev-server

优雅降级(es6->es5):babel

安装babel的核心：

npm install babel-loader babel-core babel-preset-env -D

package.json文件中会自动生成以下:

由于babel目前8.0.2版本不稳定，安装的时候出现警告没有安装依赖，需要倒退去安装稳定版本来解决这个问题:

npm install [email protected] babel-core babel-preset-env -D

在webpack.config.js文件中添加以下配置：

let 打包后变成了var ：）！！！可以放心大胆的写激进语法啦！