webpack 笔记一

简介

webpack是一个打包工具,它可以将js,css等文件进行合并.也可以把npm下载的开发包等进行合并
官方教程

一个简单的合并

流程

  1. 在js文件中使用require将其他js文件包含到main文件.
  2. 在命令行输入webpack加上传入文件地址和传出文件地址

js文件

  • 建立一个main.js文件和world.js文件
  • 将其他文件包含进入main.js
    require("./world");// 这里包含一个同级目录的world.js
    

命令行的代码

webpack main.js main.bundle.js

成功它将会输出一串数据包含Hash,Version,Time等等
这时候查看目录生成了一个main.budle.js文件

包含非js文件

  • 比如需要包含css文件
  • webpack默认只能识别js文件,如果需要其他文件需要下载loader,进入命令行输入npm install css-loader style-loader --save-dev
  • 这里安装了两个loader一个用于解析样式,一个用于解析文件
  • 在入口文件包含css文件,代码示例
    require("style-loader!css-loader!./style.css");
    
  • 引入其他文件需要指定适合的loader,指定loader共有三种方法[配置(推荐)][内联][CLI],这里是使用的是内联.
  • 再次在命令行进行打包

命令行的webpack附带命令

  • –watch 自动打包文件,–progress 显示进度,–display-modules 显示模块的详细信息
  • 例如想webpack自动打包并显示详细信息
    webpack main.js main.bundle --watch --display-modules
    
  • 也可以在package.json中的scripts中加入webpack配置
    "scripts":{
        "webpack":"webpack --watch --display-modules"
    }
    
  • 命令行中输入npm run webpack;
  • 使用webpack --help查看更多命令

webpack配置文件

如何使用配置文件

命令行使用webpack时会自动查找webpack.config.js文件,也可以使用webpack --config加配置文件地址来选择自定义的配置文件

编写配置文件

  • 新建一个webpack.config.js文件
  • 代码示例:
    module.exports = {
        entry: './main.js',//入口文件,用来包含其他文件,同上面的main.js文件
        output:{
            filename: './dist/bundle.js'//出口文件,同上面的main.bundle.js文件
        },
        module:{
            rules:[
                {
                    test:/\.css$/,use:[// 使用正则匹配css文件并指定loader
                        {loader: 'style-loader'},
                        {loader: 'css-loader',options:{
                            true
                        }}
                    ]}
            ]}
    }
    
  • 命令行webpack就如同上面一样
  • 关于另一种指定loader方式CLI请查看官方文档
1 分享 二维码
分类:代码笔记
标签:
还没有评论


在此输入评论..
0/100