Webpack打包工具教程

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
就是将多个资源打包成一个文件,避免请求过多

安装

前提要安装node.js
在控制台执行,这里使用的是淘宝镜像

cnpm install webpack webpack-cli -g

测试准备

创建两个文件并打包,准备入口,以及webpack配置文件

创建demo1.js

exports.show1=function(){
  document.writeln("我是demo1.js")
}

创建demo2.js

exports.show2=function(){
  document.writeln("我是demo2.js")
}

创建入口main.js,引入其他两个文件的依赖

const d1=require('./demo1.js')
const d2=require('./demo2.js')
d1.show1();
d2.show2();

webpack.config.js配置文件

在根目录创建webpack.config.js文件,加入一下内容

module.exports = {
  entry: "./static/js/main.js",#入口文件位置
  output: {
      path: __dirname,#生成的文件位置
      filename: "joke.js" #文件名
  }
};

文件位置普及
- __dirname： 获得当前执行文件所在目录的完整目录名
- __filename： 获得当前执行文件的带有完整绝对路径的文件名
- process.cwd()：获得当前执行node命令时候的文件夹目录名
- ./： 文件所在目录

打包

语法webpack --mode=development/production
如果不指定mode会弹出黄色警告

测试

在当前项目打卡控制台执行

webpack --mode=development

打包css

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

1.安装css-loader和style-loader

控制台执行

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

如果想要全局安装把--save-dev换成-g

2.修改配置文件

module.exports = {
  entry: "./static/js/main.js",
  output: {
      path: __dirname,
      filename: "bundle.js"
  },
  module: {#加入编译模块
    rules: [
        { test: /\.css$/, use: ["style-loader","css-loader"] }
    ]
}
};

3.在主入口引入css

我的主入口是main.js

const comm=require('./common.js')
const u=require('./util.js')
require('../style.css')#引入css
comm.show();
u.show1();

配置开发环境

项目越来越大,编译编码,webpack支持观察编译进度

使用以下命令编译进度--progress

webpack --progress

进度带上颜色--colors

webpack --progress --colors

每次修改项目都要重新编译,为了避免这样的麻烦我们可以使用监控模式,开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。

开启监控--watch

webpack --progress --colors --watch