webpack--前端自动化工具

Posted gzw-23

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack--前端自动化工具相关的知识,希望对你有一定的参考价值。

一、下载与安装

//全局安装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"   //在哪用就在那里转;
    }]]
  }
直接复制到该文件里面即可!

 

以上是关于webpack--前端自动化工具的主要内容,如果未能解决你的问题,请参考以下文章

前端自动化构建工具Webpack1.x开发模式使用指南

webpack--前端自动化工具

Webpack 简介

前端项目自动化构建工具——Webpack入门教程

细说前端自动化打包工具--webpack

gulp/webpack 前端自动化工具