webpack教程(二)

目录

1. 配置css-loader
2. 配置less-loader
3. 配置url-loader
4. 配置压缩插件
5. 配置html插件
6. 配置dev-server
7. 配置热更新
8. 配置跨域

准备工作

1. 创建webpackdemo文件夹
2. 启动cmd, 进入webpackdemo目录,运行npm init初始化package.json
3. 创建app.css文件和app.less文件

// app.css
body {
    background: #EEEEEE;
}

// app.less
.box {
    width: 600px;
    margin: 10px auto;
    img {
        width: 600px;
    }
    p {
        text-align: center;
    }
}

1. 创建入口文件main.js

require('./app.css');

1. 创建webpack.config.js

const path = require('path');
module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    },
        mode: 'development'
}

1. 测试打包是否成功

配置css-loader

1. 在webpack.config.js里加上下面的代码

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

1. 安装style-loader和css-loader

npm i style-loader css-loader --save-dev

1. 在main.js里加上以下代码:

require('./app.css')

1. 运行 webpack 命令
2. 检查配置是否成功
   在dist目录创建index.html,把打包后的index.js文件进行加载,打开index.html,若背景是灰色说明成功

配置less-loader

1. 在module的rules里面加上以下代码

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

1. 安装less和less-loader

npm i less --save-dev
npm i less-loader --save-dev

1. 在main.js加入以下代码

require('./app.less');

1. 检查配置是否成功
   在dist的index.html里加入下面的代码

<div class="box">
    <p>测试less-loader</p>
    <img src="../img.png"/>
</div>

打开index.html检查app.less里的样式是否生效

配置url-loader

1. 在webapck.config.js的module里的rules对象里加上下面的代码

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

1. 安装file-loader和url-loader

npm i file-loader url-loader --save-dev

1. 在main.js里加上下面的代码

let img = document.createElement('img');
img.src = require('./img.png');
document.body.appendChild(img);

1. 运行webpack命令,打开dist里面的index.html查看是否增加了一张图片

配置压缩插件和html插件

1. 在webpack配置文件的开头加入以下代码:

// 生成html的插件
const htmlWebpackPlugin = require('html-webpack-plugin');
// 压缩的插件
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');

在module后面添加以下代码:

plugins: [
    new htmlWebpackPlugin(),
    new uglifyjsWebpackPlugin()
]

1. 安装htmlWebpackPlugin和uglifyjsWebpackPlugin插件,同时还需要局部安装webpack

npm i webpack html-webpack-plugin uglifyjs-webpack-plugin --save-dev

1. 运行打包命令 webpack,打开dist里面的index.html和index.js检查配置是否成功

配置dev-server

1. 在webpack配置文件加上以下代码

devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000
}

1. 安装webpack-dev-server 和webpack-cli

npm i webpack-dev-server webpack-cli --save-dev

1. 在package.json的scripts里面加上下面这一句

"dev": "webpack-dev-server --open --oneline"

1. 运行npm run dev 检查配置是否成功

配置热模块替换(热更新)

1. 在webpack配置文件的开头加上

const webpack = require('webpack');

在plugins里加上

new webpack.HotModuleReplacementPlugin()
``
在devServer加上

hot: true

2. 运行npm run dev检查控制台是否有打印以下信息

[WDS] Hot Module Replacement enabled.

有则表示热更新已开启

#### 配置webpack跨域
1. 在webpack的devServer对象里加上

proxy: {
'/v4': {
target: 'https://m.maizuo.com',
// 允许跨域
changeOrigin: true,
pathRewrite: {
'^/v4': '/v4'
}
}
}

2. 在main.js里加上

// 测试跨域请求
const $ = require('jquery');

let url = '/v4/api/film/now-playing?__t=1535683702386&page=1&count=5';
$.ajax({
type:"get",
url,
success: (res)=> {
console.log(res)
},
error: ()=> {
alert('请求失败');
}
});

3. 安装jquery

npm i jquery --save-dev

4. 执行npm run dev
看是否拿到了服务器的数据