webpack的基本使用

最新推荐文章于 2024-03-26 17:57:41 发布

南庐

最新推荐文章于 2024-03-26 17:57:41 发布

阅读量399

点赞数 2

文章标签： webpack 前端 javascript npm node.js

本文链接：https://blog.csdn.net/weixin_73184582/article/details/129899641

版权

学习目标：

使用webpack从0开始搭建项目

学习内容：

webpack是什么？
初始化环境
webpack的五大模块
自动打包项目，运行项目

一.webpack是什么？

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

二.初始化环境

npm init

01.会生成一个package.json JSON文件

02.安装webpack

npm install webpack@1 -g  //全局安装
npm install webpack@1 --save-dev  //局部安装

注意，当前项目名称不能为webpack，否则会报错

03，创建文件目录和文件

创建一个src目录，在这个目录下面创建一个main.js文件，这个文件就是入口文件

在创建一个build目录，在这个目录下面创建一个HTML，当做主页面。

可以多创建几个js件，在main.js里面引入。

最后进行打包

webpack ./src/main.js ./dist/bundle.js

三.webpack的核心

手动创建一个webpack.config.js，下面的配置都是在这个文件里面进行的。

01.配置入口文件

module.exports = {
//单入口文件
  entry: './src/main.js',//文件路径
};

配置入口文件 语法：string array  object

单入口文件有两种语法，上面是第一种,第二种是数组的形式，

 entry:['./src/main.js','xxxxx']

多入口文件配置对象的方式

 /*多入口 key值可以随意设置*/
     entry:{
         index:'./src/main.js',
         demo:"./....."
     }

02.配置输出文件

//输出文件位置
output: {
        //输出的文件名称，默认生成一个dist文件夹，
        filename: 'main.js',
        // 占位符 [name].js 默认为main.js  随机值[name][has].js
        //指定文件的输出路径。__dirname node.js的变量，代表当前文件的文件目录，生成一个dist文件夹，可以写成别的
        path: path.resolve(__dirname, 'dist')//绝对路径
        /*多出口 自动生成文件名*/
    },

03.配置加载机---loader配置

为什么要配置loader？

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。-----需要使用到的loader都要自行下载！！！！！！

在 webpack 的配置中，loader 有两个属性：

test 属性，识别出哪些文件会被转换。
use 属性，定义出在进行转换时，应该使用哪个 loader。

这里我配置了一些常用的loader

 //加载器
    module: {
        rules: [
            //loader配置 由于webpack只能加载js文件，所以需要配置，首先   npm install --save-dev css-loader ts-loader
            // {test: /\.css$/, use: 'css-loader'},//test匹配css文件，use使用说明loader处理，执行顺序从右到左，从下到上 。
            {test: /\.css$/, use: [MiniCss.loader,'css-loader']},//添加了MiniCss，就不需要style-loader了，自带了loader 。
            {
                test: /\.less$/i, use: [
                    'css-loader',
                    'less-loader',
                ],
            },
            // style-loader：将js中的css通过创建style标签添加HTML中生效。css-loader将css编译成commonjs的模块到js中
            {test: /\.ts$/, use: 'ts-loader'},
            //es6转化为es5,
            {
                test: /\.js$/,
                // exclude:/(node_modules)/,
                include: path.resolve(__dirname, './src'),//只处理src目录下的文件
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    }
                }
            },
            //     npm install file-loader --save-dev 处理图片资源
            {test: /\.(png|jpg|gif|webp|jpeg)/, use: ['file-loader']}
        ]
    },

04.配置插件

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

/插件 打包优化和压缩
    plugins: [
        //安装创建 npm install --save-dev html-webpack-plugin 生成HTML文件 自动引入打包输入的文件；
        // new Html(),//使用
        new Html({
            filename: "index.html",//自动生成的文件名称，默认index.html
            template: "./buplic/index.html",//模板 代码片段html, 把template的html内容存到生成的html里面
        }),
//将每一个css提取到单独文件   npm install --save-dev mini-css-extract-plugin
        new MiniCss()
    ],

05. webpack的打包模式

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

个人认为他们的区别就是development模式打包不会清除注释，控制台打印这些。production 会压缩代码，进行一些优化。

4。webpack自动打包项目，运行项目

01.需要下载插件---两个都要下载

npm i webpack-dev-server -D
npm i webpack-dev-server -g

02.配置代码：

 //自动运行，热更新
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'),//项目创建后访问文件的路径地址--虚拟的地址
        },
        compress: true,//一切服务启用gzip压缩
        port: 9000,
    },

03.运行

启动命令 webpack serve --open 或者 npx webpack server
修改配置文件，需要重新启动

五。webpack常见的报错处理

1.少包----直接下载

2.运行不起来 ----删除module包，npm i 重新下载

3.该环境不能运行js脚本 ---切换到window PowerShell环境下

六.模块的导入方式

模块化--
模块之间的相互使用（js之间的调用和使用）
webpack默认使用node.js规范 commomjs规范
1.导出模块或变量 
module.exports={}
2.引入
const xx = require('./xxx')
es6导入和导出
导入:
export {xx}
export default xx
导出
import {xx,xx} from './xx'
import xx from './xx'

webpack的打包命令是 webpack。应该知道吧！

webpack.config.js 代码如下：

const path = require('path');
const Html = require('html-webpack-plugin');
const MiniCss = require('mini-css-extract-plugin');
// const Webpack = require('webpack');
// const WebpackDevServer = require('webpack-dev-server');
// const webpackConfig = require('./webpack.config.js');
//
// const compiler = Webpack(webpackConfig);
// const devServerOptions = { ...webpackConfig.devServer, open: true };
// const server = new WebpackDevServer(devServerOptions, compiler);
//
// const runServer = async () => {
//     console.log('Starting server...');
//     await server.start();
// };
//
// runServer();
module.exports = {
    //入口 语法：string array  object
    /*单入口 */
    entry: './src/main.js',//文件路径
    // entry:['./src/main.js','']
    /*多入口 key值可以随意设置*/
    // entry:{
    //     index:'./src/main.js',
    //     demo:"./....."
    // }
    //输出文件位置
    output: {
        //输出的文件名称，默认生成一个dist文件夹，
        filename: 'main.js',
        // 占位符 [name].js 默认为main.js  随机值[name][has].js
        //指定文件的输出路径。__dirname node.js的变量，代表当前文件的文件目录，生成一个dist文件夹，可以写成别的
        path: path.resolve(__dirname, 'dist')//绝对路径
        /*多出口 自动生成文件名*/
    },
    //加载器
    module: {
        rules: [
            //loader配置 由于webpack只能加载js文件，所以需要配置，首先   npm install --save-dev css-loader ts-loader
            // {test: /\.css$/, use: 'css-loader'},//test匹配css文件，use使用说明loader处理，执行顺序从右到左，从下到上 。
            {test: /\.css$/, use: [MiniCss.loader,'css-loader']},//添加了MiniCss，就不需要style-loader了，自带了loader 。
            {
                test: /\.less$/i, use: [
                    'css-loader',
                    'less-loader',
                ],
            },
            // style-loader：将js中的css通过创建style标签添加HTML中生效。css-loader将css编译成commonjs的模块到js中
            {test: /\.ts$/, use: 'ts-loader'},
            //es6转化为es5,
            {
                test: /\.js$/,
                // exclude:/(node_modules)/,
                include: path.resolve(__dirname, './src'),//只处理src目录下的文件
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    }
                }
            },
            //     npm install file-loader --save-dev 处理图片资源
            {test: /\.(png|jpg|gif|webp|jpeg)/, use: ['file-loader']}
        ]
    },
//插件 打包优化和压缩
    plugins: [
        //安装创建 npm install --save-dev html-webpack-plugin 生成HTML文件 自动引入打包输入的文件；
        // new Html(),//使用
        new Html({
            filename: "index.html",//自动生成的文件名称，默认index.html
            template: "./buplic/index.html",//模板 代码片段html, 把template的html内容存到生成的html里面
        }),
//将每一个css提取到单独文件   npm install --save-dev mini-css-extract-plugin
        new MiniCss()
    ],
    //打包模式
    mode: 'development',
    //自动运行，热更新
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'),//项目创建后访问文件的路径地址--虚拟的地址
        },
        compress: true,//一切服务启用gzip压缩
        port: 9000,
    },
        // 开启 HMR 特性
        // hot: true,


}

webpack文档地址模式(Mode) | webpack 中文文档 | webpack 中文文档 | webpack 中文网

完结撒花------------------

南庐

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
webpack的基本使用

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。，以供应用程序使用，以及被添加到依赖图中。-----需要使用到的loader都要自行下载！手动创建一个webpack.config.js，下面的配置都是在这个文件里面进行的。创建一个src目录，在这个目录下面创建一个main.js文件，这个文件就是入口文件。在创建一个build目录，在这个目录下面创建一个HTML，当做主页面。2.运行不起来 ----删除module包，npm i 重新下载。
复制链接

扫一扫