webpack打包器

https://www.webpackjs.com/guides/getting-started/

 

webpack

 

概念：模块化打包器
 
作用：
 
    1.将浏览器不识别的语法 转换成浏览器识别的语法
    eg:typeScript    scass    less    等css预处理器。
    2.模块化，将复杂的程序细化为小的文件
 
    还可以：
    css解析，js解析，img解析，html压缩，代码合并。gulp所能做的webpack都能做。
 
 
工作流程：
 
把你的项目当做一个整体，通过一个给定的文件（入口文件index.js），webpack找个这个入口文件所依赖的所有文件 通过loader进行打包，打包成一个或者多个浏览器可识别的js文件
 
loader 第三方包，处理各种模块
处理不同的模块，用不同的loader

webpack vs gulp 区别

 

没有可比性
 
webpack是模块打包机（功能更多）
    
 
gulp是前端自动化工具
    主要做项目的部署工作

使用流程

（手动搭建项目的流程），仅适合4.0以下打包方式。4.0以上不适合

1、全局安装webpack（安装一次即可）
cnpm install webpack@3.5.3 -g
 
2、创建文件夹 并初始化文件夹
npm init -y
 
3、局部安装webpack
cnpm install webpack@3.5.3 --save-dev
 
4、创建 webpack.config.js文件
 
5、创建 src入口文件夹 dist出口文件夹
    自己创建入口文件：src/index.js
 
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、插件（帮我们生成html模板，同时帮我们自动引入你想引入的文件）
cnpm install html-webpack-plugin --save-dev
 
9、热更新 服务器（一定要写准版本号）
cnpm install webpack-dev-server@2 --save-dev
 
在page.json的scripts中自定义运行的命令，（npm run dev）会自动打开浏览器
"dev":"webpack-dev-server --open",
 
含义：通过webpack启服务，webpack会默认找到src/的文件，--open会自动打开浏览器
 
webpack.config.js

//手动配置webpack

 

/*

_dirname:当前文件夹的绝对路径(f:react eactday01demo)

 

path.join()将第一个参数和第二个参数进行连接(f:react eactday01demo.srcindex.js)

 

*/

 

//引入node的核心模块
const path = require("path");
 
//引入模板
const HtmlWebpackPlugin = require ("html-webpack-plugin");
 
 
//配置路径（下面会用到）
const PATH = {
    app:path.join(__dirname,"./src/index.js"),//入口文件路径
    build:path.join(__dirname,"./dist")//出口文件路径
}
 
 
//下面的代码都是webpack的配置项，module.exports：是node中内置的一个导出模块的方法
 
module.exports = {
    //入口文件
    entry:{
        //这里面的key值决定了下面name的名字叫什么
        app:PATH.app,
    },
 
    //出口文件
    output:{
        filename:"[name].js",//app.js
        path:PATH.build//出口文件路径
    },
 
    //对模块的处理,用loader进行处理（对浏览器不识别的语法进行处理，eg:es6,.vue文件，.react文件等等都要在module中进行处理），将模块进行打包
    module:{
        rules:[
            {
                //如果有.js文件，用下面的loader进行处理
                test:/.js$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        //如果在.js文件中遇到了es6代码，则用@babel/env进行处理，如果遇到了react代码，则用@babel/react进行处理
                        presets:["@babel/env","@babel/react"]
                    }
                }
            },
            {
                //如果有.css文件或者.scss文件，则用下面的loadr进行处理
                test:/.(css|scss)$/,
                use:["style-loader","css-loader","sass-loader"]//loader的执行顺序是从下至上，从右至左
                //eg:如果遇到了sass文件，则先执行scss-loader文件，然后在向左执行
 
            }
            //loader是第三方的包，要进行下载
        ]
    },
 
 
    //webpack所有的插件使用位置
    plugins:[
        new HtmlWebpackPlugin({
            //出口的index.html文件
            filename:"index.html",//当前webpack会根据（下面的）模板生成index.html文件（该index.html文件在dist文件夹中，为出口文件，打包后会自动生成）
            //模板文件
            template:"./index.html",
            //./index.html为自己在根目录下创建的模板文件（自己手动创建的模板文件，在项目根目录下）
 
            //数据和模板进行结合
            title:"笑笑笑",
            arr:["李湘","王楠","张三"]
        })
    ]
}