webpack--前端自动化工具

Posted 2020-11-21 gzw-23

一、下载与安装

//全局安装webpack （不推荐）
npm i webpack -g
npm i webpack-cli -g

//局部安装（推荐）
npm i webpack -D
npm i webpack-cli -D

npx webpack -v 查看webpack的版本号

注：也可以使用cnpm安装。

二、webpack.config.js文件的配置

//webpack的配置文件，文件名不能改！！！
//万一想改的话，就是 npx wenpack --config webpack.con.js  后面的是更改后的名称
const path=require(‘path‘)  //引入此模块的目的就是，配置出口文件和入口文件的根路径；
module.exports={
    //‘development‘ or ‘production‘ 开发环境配置，第一个是开发环境，production是生产环境！！
    mode:"development",  

      devtool:‘cheap-eval-source-map‘,  //映射错误

    //配置默认的出口文件/入口文件
    //首先找到入口文件；
    entry:{   //entry入口文件，一个入口文件的话直接写，别写main对象；
        main:path.join(__dirname,‘./index.js‘)
    },
    //出口文件；
    output:{
        filename:‘bundle.js‘,  //出口文件的名，随意；
        path:path.join(__dirname,‘./dist‘)
    },
    //module--模块解析，webpack因为只认识js
    module:{
        rules:[{
            //正则表达式匹配
            test:/.css$/, 
            use:[
                "style-loader",  //语法解析；
                "css-loader"    //解析文件依赖；因为可能会有多个css文件
            ]
        },
        {
            test:/.styl$/ ,    //styl文件的配置；cnpm i stylus-loader stylus -D
            use:[
                "style-loader",
                "css-loader",
                "stylus-loader" ,  //解析成正常css；
                //注意顺序规律，从下而上；不能乱；
            ]
        },
        //图片解析；
        {
            test:/.(jpg|png|svg|gif|jpeg)$/,
            use:[
                {
                    loader:"url-loader",   //解析图片和解析文件；
                    //cnpm i url-loader file-loader -D
                    //url-loader基于file-loader -D
                    options:{    //图片的配置项
                        limit:10240
//用来控制当前的文件大小，如果当前文件大小超过所设置的文件大小，会把文件生成一个新的文件插入到dist下，如果比当前所设置的小，会放到打包出来的文件下，以bate64位的形式；
                    }
                }
            ]
        },
    ]
    }
}

注意：css-loader style-loader 这些都是需要安装的

 三、ES6转ES5   （babel中文文档）设置----webpack

const path = require(‘path‘);
//引入html插件；
const HtmlWebPackplugin = require(‘html-webpack-plugin‘)
//下载：npm install --save-dev html-webpack-plugin
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin‘)
//下载：cnpm i clean-webpack-plugin -D  会随着webpack版本的改变，配置方法也会改变。
module.exports = {
    mode: ‘development‘,
    devtool:‘cheap-eval-source-map‘,  //映射错误
    entry: {
        main: path.join(__dirname, ‘index.js‘),
    },
    output: {
        filename: ‘es6.js‘,
        path: path.join(__dirname, ‘./dist‘),
    },
    //模块解析；
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },
　　//es6转es5
   //安装：npm install --save-dev babel-loader @babel/core 

     //npm install @babel/preset-env --save-dev

     //npm install --save @babel/polyfill  彻底转换成es5；还需单独在根目录文件下建一个 .babelrc 文件，见四配置，最后在入口文件（例如：index.js）还需引入 require("@babel/polyfill");  //哪里需要转就在哪里引入！！

            {
                test: /.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    //插件，是一个数组。
    plugins: [
        new HtmlWebPackplugin({
            template: "./index.html"  //依那个HTML文件为模板，就在此写那个文件
        }),
        new CleanWebpackPlugin()
        //注意插件的先后顺序！！！不能变；
    ]
}

 四、 .babelrc 文件的配置

{
    "presets": [["@babel/preset-env",{
        "useBuiltIns": "usage"   //在哪用就在那里转；
    }]]
  }
直接复制到该文件里面即可！