webpack打包文件

webpack是模块打包机，是由nodejs编写的，可以把.vue文件编译。凡是浏览器不支持的文件（sass、typeScript），webpack都可以帮你转换成浏览器支持的文件。

处理模块通过loader进行打包，不同的文件用不同的loader.

webpack（模块打包机） gulp（前端自动化构建工具）没有可比性

什么是webpack

模块化打包器

作用：将浏览器不是别的语法转换成浏览器识别的语法

工作流程：

通过通过一个入口文件，找到这个入口文件所依赖的所有模块通过loader进行打包，打包成一个或多个js文件

1、全局安装

cnpm install [email protected] -g

2、创建文件夹初始化文件夹

npm init -y

3、局部安装webpack (手动搭建项目)

npm install [email protected] --save-dev

4、创建webpack.config.js

5、创建 src dist 文件夹

src---index.js

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
/*
    __dirname:当前文件夹的绝对路径
    path.join() 将第一个参数和第二个参数进行链接
*/
const PATH = {
    app:path.join(__dirname,"./src/index.js"),
    build:path.join(__dirname,"./dist")
}
//下面的代码都是 webpack的配置项
module.exports = {
    entry:{
        //这里面的key值决定了下面name的名字叫什么
        app:PATH.app
    },
    output:{
        filename:"[name].js",//app.js
        path:PATH.build
    },
    //做模块的处理 用loader进行处理
    module: {
        rules:[
            {
                test:/\.js$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:["@babel/env","@babel/react"]
                    }
                }
            },
            {
                test:/\.(css|scss)$/,
                use:["style-loader","css-loader","sass-loader"]//loader的执行顺序是从下至上 从右至左
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:"./index.html",
            title:"小甜甜",
            arr:["李想","穆建新","高亚楠"]
        })
    ]
}

在项目根目录下创建index.html模板

<!DOCTYPE html>
<html lang="en">
<head>   
 <meta charset="UTF-8">   
 <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title><%= htmlWebpackPlugin.options.title%></title>
</head>
<body>  
  <% for(var i=0;i<htmlWebpackPlugin.options.list.length;i++){%>      
  　　<p><%=  htmlWebpackPlugin.options.list[i]%></p> 
  <%}%>
</body>
</html>

6、处理css的loader

cnpm install --save-dev style-loader css-loader sass-loader node-sass

7、处理js的loader

cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

8、插件

cnpm install html-webpack-plugin --save-dev;

打包的命令：webpack

9、热更新服务器

cnpm install webpack-dev-server@2 --save-dev;

在package.json的scripts对象中添加以下代码：

"dev":"webpack-dev-server --open",

运行项目：npm run dev

猜你喜欢