webpack打包

最新推荐文章于 2024-07-26 15:22:42 发布

酷码66

最新推荐文章于 2024-07-26 15:22:42 发布

阅读量102

点赞数

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/qq_61919625/article/details/129595174

版权

1.什么是webpack

webpack中文网： webpack | webpack 中文文档 | webpack 中文网

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

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

2.安装webpack

npm install webpack@4.32.2 webpack-cli@3.3.2 webpack-dev-server@3.5.1 -D-S

3.根据依赖关系打包

/src/index.js

import bar from './bar';
bar();
console.log('index');


/src/bar.js

import a from './foo'
export default function bar() {
  console.log('bar');
  a();
}

/src/foo.js

export default function a(){
    console.log('foo');
}

/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="dist/bundle.js"></script>
</head>
<body>
    
</body>
</html>

./webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
  }
};

步骤

1、先创建以上四个文件

2、新建webpack.config.js (下页)

3、在package.json的scripts中添加：

"start": "webpack --config webpack.config.js --mode development"

4、输入： npm run start

5、会发现根目录出现dist文件夹及bundle.js

6、打开index.html, F12预览，在控制台查看

4.webpack的4个核心概念

入口(entry)

输出(output)

loader

插件(plugins)

4.1 入口(entry)

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

./webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
  }
};

4.2 出口(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

./webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
  }
};
// path:  打包后文件的路径
// filename: 打包后js文件名

4.3 loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

4.3.1 实例： css-loader style-loader

./src/style/reset.css

* {
  margin: 0;
  padding: 0;
}
.header {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

./src/index.js

import "./style/reset.css"

import bar from './bar';
bar();
console.log('index');

1、在命令行： npm run start

2、报错，因为缺少loader,webpack不能解析css文件

解决方案：

1、本地安装loader:

cnpm install css-loader@3 --save-dev

cnpm install style-loader@2 --save-dev

2、在webpack.config.js中添加loader的规则

3、再次执行： npm run start

注意： css被打包在bundle.js中

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                 test: /\.css$/,
                 use: [
                     'style-loader' ,
                     'css-loader'
                  ]
             }
         ]
    }
};

4.4 插件plugins

安装插件

删除目录

npm i clean-webpack-plugin@^3.0.0 -D-S

将js自动注入index.html

npm i html-webpack-plugin@4.5.0 -D-S

配置插件

const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
......
plugins: [// 对应的插件
    new HtmlWebpackPlugin({    //配置
        filename: 'index.html',    //输出文件名
        //以当前目录下的index.html文件为模板生成dist/index.html文件
        template: './public/index.html',   
        inject: 'body'
    }),
    new CleanWebpackPlugin(), //删除目录
 ]

运行

npm run start
会在dist中复制index.html, 并自动注入js

5.热启动，热更新

1）在模块内添加属性：devServer

devServer: {//配置此静态文件服务器，可以用来预览打包后项目
    hot: true,//热加载
    contentBase: path.resolve(__dirname, 'dist'),//开发服务运行时的文件根目录
    host: 'localhost',//主机地址
    port: 9090,//端口号
    compress: true//开发服务器是否启动gzip等压缩
}

2）在package.json的scripts中添加：

"dev": "webpack-dev-server --mode development --open"

3）npm run dev :打包并自动启动服务器，文件更改自动更新。

vue打包过程

6.解析*.vue文件

vue-loader：解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。

vue-loader的目的在于提取。

参考案例

npm i vue-loader@15.9.5 -D-S

npm i vue-template-compiler@2.6.12 -D-S

npm i vue@2.6.12 -S

配置

const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
在rules中添加规则：
//处理vue
{
    test: /\.vue$/,
    use: ['vue-loader']
}
在plugins中添加：
// 请确保引入这个插件！
new VueLoaderPlugin()

按照vue-cli的结构，创建main.js，App.js，添加一个组件

运行