美文网首页
webpack教程(二)

webpack教程(二)

作者: 胡儒清 | 来源:发表于2018-08-31 10:56 被阅读296次

    目录

    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
    看是否拿到了服务器的数据
    

    相关文章

      网友评论

          本文标题:webpack教程(二)

          本文链接:https://www.haomeiwen.com/subject/zmzjwftx.html