Webpack(打包工具)

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许
多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还
可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加
载。通过 loader 的转换,任何形式的资源都可以视作模块,比如
CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、
Coffeescript、 LESS 等。

核心概念

入口:
webpack打包的入口文件

输出:
这个就是对源代码打包之后,得到的文件,文件我们一般命名为bundle.js

Loader:
默认情况下,webpack只能打包.js结尾的文件,但是webpack提供了很多Loader,能打包项目中任何文件,比如css,vue,png文件都可以打包

配置文件:
简化我们的配置,让我们少写代码

插件:
比如压缩js,比如开发阶段实现的热重载(在代码中保存,浏览器就自动刷新),
为了让webpack更加强大

实际演练

前提:
    安装好`webpack`全局包 
    输入指令:npm i webpack -g

打包单个.js文件

步骤:
        1、在cmd切换到项目根目录
        2、使用webpack全局包打包即可
            格式:webpack 入口文件(entry.js) 输出文件(bundle.js)
            输入指令: webpack entry.js bundle.js
        3、打包得到bundle.js,建立index.html,在index.html中导入打包之后的bundle.js
        4、运行

    注意点:
        在index.html中导入的一定是打包之后的输出文件

打包多个具有依赖关系的.js文件

前提:
        在entry.js中的代码中导入依赖的文件

        1.在modul的内容 var name=“张三” 并且进行输出module.exports=name;
        2.在入口文件进行导入modul的内容
            const name = require('./module.js');
        3.然后进行打包得到bundle.js

    步骤:
        同上

    注意点:
        在index.html中导入的一定是打包之后的输出文件 bundle.js
        Webpack 会分析入口文件,解析包含依赖关系的各个文件。
        这些文件(模块)都打包到 bundle.js 。

打包非.js文件 (通过Loaders实现)

以打包.css文件为例(需要额外做的步骤)   
    1、安装style-loader&css-loader
        先输入npm init -y 生成一个package.json用来装包的
        输入指令:cnpm i style-loader css-loader --save-dev
    2、在入口文件中导入css的时候,按照下面这样写
        在js中写:require('!style-loader!css-loader!./site.css')

    3、针对第二步,如果导入的css过多,还可以做一个简化,在入口文件,导入的时候,可以不用写前面的
        在js中写:require('./site.css')
        但是,在使用webpack打包的时候,得这样写
        输入指令:webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"

    注意点:
        "css=style-loader!css-loader" 使用双引号即可,不然会报错

配置文件(一起打包,重点学习)

作用:简化打包的操作

步骤:
    1、在项目根目录下创建一个文件名称叫 webpack.config.js的文件(默认文件名称)
    2、把我们原先在cmd中写的命令,全部写到webpack.config.js中(在这个文件中进行手动配置)
    3、最后在根目录下,执行webpack即可打包了

    a.在入口文件entry.js中导入想要的文件require('./site.css')
    b.不是js后缀的文件话在先装对应的loader文件,装之前要生成一个package.json用来装包
    c.在webpack.config.js输写下面的代码
        module.exports = {
        entry:'./entry.js', //项目打包的入口文件
        output:{            
            path: __dirname,
            filename: 'bundle.js'   //输出文件
        },
        module:{                    //配置loader
            loaders: [
                {
                    test: /\.css$/, 
                    loader: 'style-loader!css-loader' //loader执行顺序是从后往前
                }
            ]
        }
    }
    e.输入指令:webpack 即可打包 相当于webpack webpack.config.js

插件

作用:让我们Webpack的功能更加强大

全局包&本地包
    安装方式不一样 
        全局包 npm i webpack -g   用在终端里面,执行命令
        本地包 npm i webpack --save-dev   用在项目里面的

    安装的地方不一样:
        全局包:是安装在个人目录下   C:\Users\你自己的用户名\AppData\Roaming\npm

        本地包:项目的根目录的node_modules中
1.步骤同上,用之前要在项目中安装本地webpack ,输入指令npm i webpack --save-dev
    2.代码如下:
    var webpack = require('webpack')

    module.exports = {
        entry:'./entry.js', //项目打包的入口文件
        output:{//输出文件
            path: __dirname,
            filename: 'bundle.js'
        },
        module:{ //配置loader
            loaders: [
                {
                    test: /\.css$/, 
                    loader: 'style-loader!css-loader' //loader执行顺序是从后往前
                }
            ]
        },
        plugins:[//插件
            new webpack.BannerPlugin('...这个文件是被我打包的...')
        ]
    }
    注意点:
        有些包既要全局安装,又要在项目中安装,不要觉得奇怪,应用的地方不一样
        plugins在我们的webpack.config.js中写的时候,必须和entry,output,module同级
展开阅读全文

没有更多推荐了,返回首页