Webpack(模块打包工具)

最早的时候，是js的打包工具，而现在可以打包任何形式的模块文件, 帮助我们管理复杂项目的工具

webpack网址: www.webpackjs.com/concepts/lo…

安装webpack

• npm init 初始化一个node的环境

• cnpm install webpack webpack-cli -D 组件内安装webpack

• npx webpakc -v 查看组件内的webpakc版本

配置

src同级配置webpack.config.js

const path = require("path")
module.exports = {
    // mode:"development",
    entry: {
        // 告诉webpack打包src下的index.js文件
        main: "./src/index.js"
    },
    output: {
        // 输入文件名
        filename: "main.js",
        // 输出目录的绝对路径
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [{
            // 图片 要打包的后缀名
            test: /\.(jpg|png|gif|woff)$/,
            use: {
                //告知webpack某些特定文件如何打包
                loader: 'url-loader',
                options: {
                    //保存图片的名称,占位符
                    name: '[name]_[hash].[ext]',
                    //把图片打包到某个文件中
                    outputPath: "images/",
                    // 如果图片大与2048就会出现在dist里面，如果没超就在main.js里面
                    limit: 2048,
                }
            }
        },
        {
            // scss样式 要打包的后缀名
            test: /\.scss$/,
            use: [
                "style-loader",
                {
                    loader: "css-loader",
                    options: {
                        importLoaders: 2
                    }
                },
                "sass-loader",
                "postcss-loader",
            ]
        },
        {
            // 字体 要打包的后缀名
            test: /\.(eot|ttf|svg)$/,
            use: {
                //告知webpack某些特定文件如何打包
                loader: 'file-loader',
            }
        },
        ]
    }
}

• 所有用到的loader都需要下载

打包结束后自动生成一个html文件 并把打包生成的js也引入进去 在webpack.config.js

//下载的指令:cnpm install --save-dev html-webpack-plugin
// 需要在src目录下写一个index.html用于复制
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
   plugins: [new HtmlWebpackPlugin({
       //因为你普通打包下来的html没有我们放属性的div，所有复制一个src下的index.html
        template:"src/index.html"
    })],  
}

自动更新打包

第一种方法

--watch 自动打包，页面需要手动刷新

//package.json配置watch监听打包，只要内容发生变化，就会自动更新
"scripts": {
        "watch": "webpack --watch"
 },
 //启动指令 npm run watch

第二种方法

dev-server 自动打包，自动刷新页面

先下载dev-server

cnpm install webpack-dev-server -D

//首先配置package.json
"scripts": {
	//帮助我们启动http服务器
        "start": "webpack-dev-server"
 },
 //然后在webpack.config.js配置
 devServer: {
        // 基础配置项，指向dist文件
        contentBase: "./dist",
        // 自动打开浏览器
        open: true,
        // 设置默认端口号
        port: 8081
    },
 //启动指令 npm run start

使用Babel处理ES6的语法

www.babeljs.cn/ Babel网址,

1.首先下载

​ cnpm install --save-dev babel-loader @babel/core

​ cnpm install @babel/preset-env --save-dev

webpack.config.js配置
 module: {
  rules: [
    	{
        	test: /\.js$/,
        	exclude: /node_modules/,
        	loader: "babel-loader",
            options:{
                  presets:["@babel/preset-env"]
           }
    	},
	]
 }