zoukankan      html  css  js  c++  java
  • webpack了解

    一、理解webpack

    什么是webpack?

      是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。"

    二、前期准备

    1.安装

      npm install --savd-dev webpack //下载

      npm init -y //初始化 下载package.json 保证node是最新的

      新建一个webpack.config.js文件,这里面放置的就是怎样实现打包的代码

    2.我们可以更改运行webpack的命令

      在package.json中有个scripts中添加 "build":"webpack" 那么执行webpack的话 就可以用 npm run build

    3.webpack中各个文件的作用

      package.json的作用是对webpack进行初始化

      webpack.config.js是对文件夹中的文件进行操作,里面都是需要对哪些文件进行什么样子的操作

    以上基本的操作完成了

    三、简单实现

    module.exports={
        entry:{//入口文件
            index:'./index.js',
            vendor:['./web/jquery']
        },
        output:{//出口文件
            path:path.resolve(__dirname,'dist'),
            filename:'[name].[hash].js',//设置一个带hash的文件
        },
        module:{
            rules:[
                {//es6转es5
                    test:/.js$/,
                    exclude:/node_modules/,
                    loader:'babel-loader',
                    query:{
                        presets:['es2015']
                    }
                },
            ]
        },
        //热更新
        devServer: {
            inline: true,
            port: 8099
          },
        plugins:[
            new webpack.HotModuleReplacementPlugin(),//热更新
        ]  
    }

    我们可以看一下,最基本的就是需要

    entry:入口文件;output:出口文件;module里面放的是下载的模块和对哪些文件进行操作;plugins是引入插件

    四、在项目中需要实现的功能

    1、将ES6转为ES5、sass/less转成css

      这种的话就是在module中的rules中执行特定的文件,并且使用对应的模块

    2、多个入口多个出口

      多个入口,我们需要的是使用golb设置一个全部的文件;

      多个出口

    path:path.resolve(__dirname,'dist'),
    filename:'[name].[hash].js',//设置一个带hash的文件

    3、将css文件单独打包、js文件单独打包、引入的第三方js文件单独打包、图片转为base64

    (1)css单独打包成一个文件,我们需要用到一个插件:extract-text-webpack-plugin 然后再代码中这样:

    module中rules

    {//css
                    test:/.css$/,
                    exclude:/node_modules/,
                    loader:ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
                    //loader:ExtractTextPlugin.extract('style-loader','css-loader!postcss-loader'),
    
    },

    plugins

    new ExtractTextPlugin('style.css'),//将css单独生成 

    (2)第三方js文件(比如jquery)

    入口文件

    entry:{//入口文件
            index:getfile(),
            vendor:['./web/jquery']
    },
    // plugins中
    new
    webpack.optimize.CommonsChunkPlugin({//第三方插件 name:['vendor','manifest'] }),

    4、热更新

    热更新的意思是,当我们修改代码的时候,保存文件之后,webpack自动进行打包

    在module.export中添加

    //热更新
    devServer: {
            inline: true,
            port: 8099
    },

    plugins

    new webpack.HotModuleReplacementPlugin(),//热更新

    代码:https://github.com/GainLoss/My-Webpack.git

    =============================================

    注意:

    (1)在执行webpack-dev-server --open的时候,出现找不到webpack-dev-server

    解决就是安装的时候用npm install webpack-dev-server -g这个命令安装 参考https://stackoverflow.com/questions/31611527/webpack-webpack-dev-server-command-not-found

    要打开webpack-dev-server的时候命令必须是webpack-dev-server --open

    (2)理解一下module中rules和plugins的区别:

    module中rules是在打包构建过程中处理源文件,一次处理一个;

    plugins是对整个构建过程进行处理

     

  • 相关阅读:
    cf C. Vasya and Robot
    zoj 3805 Machine
    cf B. Vasya and Public Transport
    cf D. Queue
    cf C. Find Maximum
    cf B. Two Heaps
    cf C. Jeff and Rounding
    cf B. Jeff and Periods
    cf A. Jeff and Digits
    I Think I Need a Houseboat
  • 原文地址:https://www.cnblogs.com/GainLoss/p/7198953.html
Copyright © 2011-2022 走看看