webpack打包工具

webpack环境配置:

npm install webpack webpack-cli -g 默认下载最新版本,全局安装以后直接使用

可手动创建项目文件夹也可输入指令:

mkdir webpack-demo  //创建项目文件夹,随意名字同js变量名规则
cd webpack-demo  //进入项目文件夹

npm init -y  在项目文件中打开小黑窗 生成项目配置文件

手动创建一个webpack.config.js打包配置文件

代码:

module.exports={	 
	 项目入口配置,
     项目出口配置,
     加载器配置,
     插件配置,
     开发模式配置,
     其他
}

项目入口配置:

项目入口配置，webpack指令执行文件 配置
module.exports = {
    entry:__dirname+"/src/main.js",//默认是__dirname+"src/index.js"


    context:__dirname+"/src",//basePath 基本路径默认入口在src路径里面
    entry:"./main.js",//直接在当前文件目录(webpack文件)找main.js



    写法2:
    context:__dirname+"/src",
    entry:["./index.js","./main.js"]//两个入口代码打包成一个文件

}

多入口 多出口:

module.exports={

    context: __dirname + "/src",
    entry: {
        // 方式1   出口文件名:"入口文件位置"
        a: "./main.js",
        index: "./index.js", //分开成两个文件打包 文件名为属性名a index
        vue:"./mainvue.js",


        // 打包出口方式22
        index2: {
            import: "./index2.js", //引入的入口文件
            filename: "xxx.js" //打包的文件名

        }
    },

}

出口output:

output: {
        asyncChunks: true, //创建按需加载的异步
        path: __dirname + "dist2", //输出的目录 默认dist
        filename: '[name]-xiazhi1-[id]-bundle[hash:5].js', //出口文件name
        library: {
            name: "Mylibrary",
            type: "umd", //打包类型
        }, //库名

        auxiliaryComment: 'Test Comment', //各种模块化导出技术的统一注释(把type设置为umd)	  
        
         清空问之前的文件 keep：但是保留index.html
         clean: {
            keep: /index.html/
        }, //清空之前的文件
    },

加载器配置:

webpack在打包时 会根据js文件中的引入语法 去加载其他文件 然后读取其他文件中 webpack只能识别js和json

为了识别css  借助工具 加载器loader 按照对应的文件编码进行解析

不同的文件类型就要使用不同的规则去解析  不同的规则就用不同的加载器解析

加载器下载指令

 npm i file-loader --save-dev文件加载器

 ts加载器:npm install ts-loader  webpack typescript  --save-dev   需要创建tsconfig文件

babel-loadr加载器  npm install  babel-loader @babel/core @babel/preset-env  webpack -D

 npm i sass-loader -save-dev  sass加载器

 module: {
        rules: [
     css加载器
               自动识别js中导入的css文件 并引入页面
               user数组的加载只能从后往前  负责加载标签
             //npm install css-loader   style-loader   --save-dev 下载组件
             {test:/\.css$/,use:["style-loader","css-loader"]},

             {
                // 让css单独生成文件 配置插件后手动引入页面
                test: /\.css$/,
                //css生成到css文件中,项目中以<link>形式引入使用
                use: [MiniCssExtractPlugin.loader, 'css-loader'],

            },
             {
                test: /\.(png|jpg|jpeg|mp4|mp3)$/, //引入文件加载器
                use: ["file-loader"],
            },


            // babel  转换es5和es6
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-object-rest-spread']
                    }
                }
            },


            // sass编译   
            {
                test: /\.s[ac]ss$/i,
                use: [
                    'style-loader', //不用单独引入 直接运行js代码 动态写入页面    
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },

   ],
}