webpack进阶学习

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 这个配置文件：

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

3.使用webpack打包sass文件

运行 npm i sass-loader node-sass -D。
在 webpack.config.js 中添加处理sass文件的loader模块：

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

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

运行 npm i url-loader file-loader -D。
在 webpack.config.js 中添加处理sass文件的loader模块：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

可以通过 limit 指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码，name=[name].[ext] 能使图片在网页上也是原名。

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960&name=[name].[ext]' }

四.引入bootstrap

运行 npm install bootstrap@3 -s。
在 webpack.config.js 中添加处理文字的 loader 模块：

{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}

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

五.说明装包-S和-D

-S：安装到上线环境
-D：安装到开发环境
-g：安装到全局
-i：install（等同）