webpack进阶学习

一.两种webpack-dev-server部署

1.package.json

在

package.json

的 script 节点下。

2.webpack.config.js

webpack.config.js

文件，新增

devServer

节点。

二.使用import语法导入CSS样式表

在

main.js

中

import './css/index.css'
import './css/index.less'
import './css/index.scss'
import 'bootstrap/dist/css/bootstrap.css'
           

三.使用webpack打包文件

1.使用webpack打包css文件

运行

npm i style-loader css-loader -D

。

修改

webpack.config.js

这个配置文件：

module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
        ]
    }
           

2.使用webpack打包less文件

运行

npm i less-loader less -D

。

修改

webpack.config.js

这个配置文件：

3.使用webpack打包sass文件

运行

npm i sass-loader node-sass -D

。

在

webpack.config.js

中添加处理sass文件的loader模块：

4.使用webpack处理css中的路径

运行

npm i url-loader file-loader -D

。

在

webpack.config.js

中添加处理sass文件的loader模块：

可以通过

limit

指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码，

name=[name].[ext]

能使图片在网页上也是原名。

四.引入bootstrap

运行

npm install [email protected] -s

。

在

webpack.config.js

中添加处理文字的 loader 模块：

注意：用什么版本对应使用什么版本的 bootstrap 插件。

五.说明装包-S和-D

-S：安装到上线环境

-D：安装到开发环境

-g：安装到全局

-i：install（等同）