手记

webpack模块化开发(二)

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 babel-loader@7.1.5 babel-core babel-preset-env -D

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

let 打包后变成了var :)!!!可以放心大胆的写激进语法啦!




作者:1994陈
链接:https://www.jianshu.com/p/afa190b4b248


0人推荐
随时随地看视频
慕课网APP