Webpack

已于 2024-03-25 15:31:42 修改
阅读量595 收藏 29
点赞数 29
文章标签： webpack
于 2024-03-23 11:06:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52346897/article/details/136962065
版权

认识webpack

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具
1.静态: 项目中的静态资源如css、图片等文件
2.模块: js文件（模块化开发中，一切js文件皆为模块）
3.打包: 主要帮你压缩代码，然后还会加密、混淆代码防止被人偷窥

打包还有一个意思： 就是会把你项目中很多个文件压缩成一个文件

使用webpack为了解决 后缀名.vue 文件的问题

webpack作用

分析、压缩、打包代码

webpack好处

1、减少文件体积、减少文件数量
2、提高网页加载速度

webpack基础使用步骤

注意：webpack是node环境中的一个工具类模块，它本身是基于nodejs的
运行webpack项目命令「npm run build」

1. 新建一个文件「不要英文名字」

在这里插入图片描述

2. 初始化文件： npm init -y 「会出现一个package.json的文件」

在这里插入图片描述

3.新建文件

:src文件夹中新建测试文件index.js「src中新建测试文件index.js 」在这里插入图片描述

4.根目录中新建 webpack.config.js文件

在这里插入图片描述
代码块 :

注意： webpack.config.js中需要写配置文件
路径：'https://webpack.docschina.org/'
代码：
// webpack 的配置文件「在webpack官网的下面直接粘贴就行」

// 倒入一个路径模块
const path = require('path');

// 导出一个对象
module.exports = {
    //人口文件： webpack要对那个文件进行处理
    entry: './src/index.js',
    // 出口文件： webpack 处理之后的文件存放路径
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
};

5. 下载一个启动命令 「在webpack官网中搜索:下载安装」

路径: ‘https://webpack.docschina.org/guides/getting-started/#basic-setup’;
下载包文件命令： npm install webpack webpack-cli --save-dev
注意：需要在package.json中新增一个内容 「有启动webpack的作用」
在这里插入图片描述

6. 注意： 如果有出要一个红色的报错需要设置"开发模式"

报错信息:「“mode’ option has not been set”」 路径:
‘https://webpack.docschina.org/configuration/mode/#root’
如下:解决方法需要在webpack.config.js 文件中设置 开发者模式

// 倒入一个路径模块
const path = require('path');

// 导出一个对象
module.exports = {
  	
  	// 解决报错问题
    // 设置开发模式 
    mode:'development',
  
    //人口文件： webpack要对那个文件进行处理
    entry: './src/index.js',
    // 出口文件： webpack 处理之后的文件存放路径
    output: {
        path: path.resolve(__dirname, 'dist'),
        // 输出的文件名字
        filename: 'bundle111.js',
        clean: true, // 在生成文件之前清空 output 目录
    },
};

在这里插入图片描述

7. 设置开发模式 「解决报错问题」

在这里插入图片描述注意：‘如果不清空的话，修改完文件之后还会有之前的文件，这时候需要加上清空的命令.’

8. 清空之前的打包文件

路径: ‘https://webpack.docschina.org/configuration/output/#outputclean’
在这里插入图片描述注意: 需要测试一下打包的js文件，在根目录中新建一个html文件

9.碰到一个问题： js的文件还需要手动引入自动将打包出来的js文件引入html文件里面

在这里插入图片描述代码:

解决方法：htmlwebpackplugin
处理html文件「将打包出来的js文件自动引入指定的html中」
路径: 'https://webpack.docschina.org/plugins/html-webpack-plugin/#root'
命令： 「npm install --save-dev html-webpack-plugin」

基本用法：
// webpack 的配置文件

// 倒入一个路径模块
const path = require('path');

// 倒入处理html 文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 导出一个对象
module.exports = {
    // 设置开发模式 
    mode:'development',
    //人口文件： webpack要对那个文件进行处理
    entry: './src/index.js',
    // 出口文件： webpack 处理之后的文件存放路径
    output: {
        path: path.resolve(__dirname, 'dist'),
        // 输出的文件名字
        filename: 'bundle111.js',
        clean: true, // 在生成文件之前清空 output 目录
    },
    // 引入解决body中自动嵌入js文件的插件
    plugins: [new HtmlWebpackPlugin({ //「需要修改一下这里 需要传递参数」
        //需要传递参数「将来打包之后的文件需要插入到那个html文件中」
        // 注意：需要提供一个绝对路径
        template:path.resolve(__dirname, 'index.html'),
    })],
};

在这里插入图片描述

写完之后从新运行项目： 「npm run build」
注意：
就会把index.html文件复制一份，放到dist文件中并且js自动过插入成功
效果：
在这里插入图片描述

10. 解决处理文件后缀 .vue的项目问题

解决方法：
下载配置vue-loader「处理.vue单文件组件」
路径: ‘https://vueloader.vuejs.org/zh/guide/#vue-cli’
下载命令: 'npm install -D vue-loadervue-template-compiler

11. 包括下载 vue的包

下载命令「npm i vue」
webpack 配置:
在这里插入图片描述
代码：

**写完的js文件
// webpack 的配置文件

// 倒入一个路径模块
const path = require('path');

// 倒入处理html 文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 导入 VueLoaderPlugin ： 处理 .vue 文件的插件
const {VueLoaderPlugin} = require('vue-loader')

// 导出一个对象
module.exports = {
    // 设置开发模式 
    mode: 'development',
    //人口文件： webpack要对那个文件进行处理
    entry: './src/index.js',
    // 出口文件： webpack 处理之后的文件存放路径
    output: {
        path: path.resolve(__dirname, 'dist'),
        // 输出的文件名字
        filename: 'bundle111.js',
        clean: true, // 在生成文件之前清空 output 目录
    },
  
    // 引入解决 .vue 文件的modeule模块
    module: {
        rules: [
            // ... 其它规则
            // 规则： 匹配 .vue ，然后处理.vue的文件
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },

    // 引入解决body中自动嵌入js文件的插件
    plugins: [
        new HtmlWebpackPlugin({
            //需要传递参数「将来打包之后的文件需要插入到那个html文件中」
            // 注意：需要提供一个绝对路径
            template: path.resolve(__dirname, 'index.html'),
        }),
      
        // 请确保引入这个插件！// 处理 .vue文件的插件
        new VueLoaderPlugin()
    ],
};**

12. 需要在 src文件中新建一个 app.vue的文件

在这里插入图片描述

13. 在app.vue文件中需要写的内容

在这里插入图片描述

14. 在src 的 idnex.js 中写的内容

在这里插入图片描述

15. 需要在index.html中有挂载vue实例的内容

在这里插入图片描述

16. 打印结果

在这里插入图片描述

18. 如果想在vue文件中设置style的时候需要使用一个webpack中的一个插件否在就报错

路径：‘https://www.webpackjs.com/plugins/mini-css-extract-plugin/#root’;
命令：npm install --save-dev mini-css-extract-plugin
注意：安装完这个之后还需要安装一个插件
命令：npm i css-loader

在这里插入图片描述
代码：

webpack.config.js文件
修改代码：
// webpack 的配置文件
// 倒入一个路径模块
const path = require('path');
// 倒入处理html 文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 导入 VueLoaderPlugin ： 处理 .vue 文件的插件
const {VueLoaderPlugin} = require('vue-loader')
// 导入处理css的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 导出一个对象
module.exports = {
    // 设置开发模式 
    mode: 'development',
    //人口文件： webpack要对那个文件进行处理
    entry: './src/index.js',
    // 出口文件： webpack 处理之后的文件存放路径
    output: {
        path: path.resolve(__dirname, 'dist'),
        // 输出的文件名字
        filename: 'bundle111.js',
        clean: true, // 在生成文件之前清空 output 目录
    },
    // 引入解决 .vue 文件的modeule模块
    module: {
        rules: [
            // ... 其它规则
            // 规则： 匹配 .vue ，然后处理.vue的文件
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },{
              	//引入处理css的loader文件
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
        ]
    },

    // 引入解决body中自动嵌入js文件的插件
    plugins: [
        new HtmlWebpackPlugin({
            //需要传递参数「将来打包之后的文件需要插入到那个html文件中」
            // 注意：需要提供一个绝对路径
            template: path.resolve(__dirname, 'index.html'),
        }),
        // 请确保引入这个插件！// 处理 .vue文件的插件
        new VueLoaderPlugin(),
        // 处理css的插件
        new MiniCssExtractPlugin()
    ],
};

在这里插入图片描述
在这里插入图片描述

效果:
在这里插入图片描述

19. 遇到一个问题，每次改完之后就要从新打包，

注意：需要借助一个插件：帮助我们自动打包
路径：‘https://www.webpackjs.com/configuration/dev-server/#root’
命令： npm i webpack-dev-server

在这里插入图片描述
代码：

在这之后会有一些其他的配置内容
左侧的内容: hot文件、open文件、proxy文件
配置代码：「需要写在webpack.config.js中并且需要写到抛出中」
// webpack中自动打包工具
    devServer: {
        // compress:对打包文件进行压缩
        compress: true,
        // port指定开发服务器监听的端口
        port: 9000,
        // hot:模块热替换「修改的打包，没修改的不打开」
        hot:true,
        // 告诉 dev-server 在服务器已经启动后打开浏览器
        open: true,
        // 配置代理
        // 当我们访问 /api地址的时候，自动将这个请求发送给: http://localhost:3000/api这个地址上
        proxy: {
            '/api': 'http://localhost:3000',
        },
    },
代码:

在这里插入图片描述

20. 自动启动文件，自动保存文件

注意: 需要在package.jone 中重新配置一个命令 「只要修改完之后就可以帮助我们自动打包」
在这里插入图片描述

21. 在webpack.config.js文件中需要配置多入口文件

原因: 以后开发的时候万一有很多个js文件
在这里插入图片描述

22. 给scr设置别名

代码：

代码：「需要写在webpack.config.js中并且需要写到抛出中」
// 配置别名
resolve: {
// 给src目录配置别名: @
  alias: {
     '@':path.resolve(__dirname,'src'),
  },
},

23.配置可以省略的文件后缀

注意: 也可以省率文件的后缀名
代码:

 		// 配置别名
    resolve: {
        // 给src目录配置别名: @
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
        // 配置省略文件后缀的内容
        extensions: ['.js', '.json', '.wasm', '.vue'],
    },

22~23的步骤图片
在这里插入图片描述
如果想把文件文件后缀略的话需要进行内容的配置，需要在src的index.js中进行内容的修改
代码:
在这里插入图片描述

24. 可以使用vant组件组件库的内容

注意: 需要下载: 「npm i vant」
需要导入到index.js中使用
在这里插入图片描述

25. 编写数据接口

在webpack.config.js中写数据接口的内容
包括下载mock.js的包 「npm i mock.js」
链接: 'https://www.webpackjs.com/configuration/dev-server/#devserversetupmiddlewares';

代码:
// 编写数据接口
        setupMiddlewares: (middlewares, devServer) => {
            if (!devServer) {
                throw new Error('webpack-dev-server is not defined');
            }
            // 模拟数据
            var data = Mock.mock({
                // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
                'list|4': [
                    {
                        img:"@image(100x100,@color)"
                    }
                ]
            })
            
            // get请求 //数据返回信息 //
            devServer.app.get('/imgsss', (req, res) => {
                res.send(data.list);
            });
            return middlewares;
          
        },
注意: 数据虽然是模拟完了，但是我们现在还没有办法进行访问，需要通过一个个axios的方法进行访问内容.

在这里插入图片描述

26. 使用axios访问模拟好的接口内容

下载: npm i axios
注意: 需要在src中新建一个utis的文件夹 然后新建一个 http.js 文件

在axios 中直接粘贴内容:「axios的二次封装」
1. 先倒入axios
import axios from 'axios';

2. axios实例中粘贴
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

3. 在axios中的拦截器中粘贴内容 //「需要把前面的axios改成：‘instance’」
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

4. 最后导出axios模块
export default  axios;

27.同时需要对axios的方法进行二次的封装

注意: 需要在utis中新建一个api文件写内容
代码:
import axios from './http';//导入axios

// 请求轮播图的列表的接口
export function getimgs(){
    return axios({
        url:'/imgsss'
    })
}
// 注意：在哪里调用 getimgs() 这个方法就会生效

28. App.vue 中编写内容

在这里插入图片描述代码：

<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in list" :key="index">
        <img style="height: 200px; width: 100%" :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <h1>{{ msg }}</h1>
    <van-button type="primary" @click="handler">更新数据</van-button>
    <hr />
  </div>
</template>
<script>
// 导出语句
import { ref } from "vue";
// 导入请求轮播图列表数据的方法
import { getimgs } from "./utils/api";
export default {
  setup() {
    var msg = ref("hello vue!!!");
    var list = ref([]);
    getimgs().then((res) => {
      // console.log(res.data,123);
      list.value = res.data;
    });
    // axios({
    //    url:'/imgs'
    // })
    return {
      msg,
      list,
      handler() {
        msg.value = "你好, vuejs!!!";
      },
    };
  },
};
</script>
<style>
h1 {
  color: red;
  background: yellow;
}
</style>

效果：
在这里插入图片描述

29. 配置source-map

路径：‘https://www.webpackjs.com/configuration/devtool/#root’
注意：在webpack.confing.js中新增内容
代码：
// 生成source-map映射文件
devtool:‘source-map’,
操作完成之后使用启动命令:'npm run build’操作
之后在总文件里有一个dist文件夹中出现后缀待着.map的文件
在这里插入图片描述

30. 使用scss 在webpack中需要解析scss文件

代码：

路径：'https://www.webpackjs.com/loaders/sass-loader/#root'

命令：'npm install sass-loader sass --save-dev'

代码：
module: {
    rules: [
      // ... 其它规则
      // 匹配.vue文件, 然后处理.vue文件
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 处理css文件的loader
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      // 处理 scss文件的loader 
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          // 'style-loader', // 替换成：MiniCssExtractPlugin.loader
          MiniCssExtractPlugin.loader,
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
    ]
  },

在这里插入图片描述

注意：设置完成之后可以在其他的地方使用
代码：
注意：需要在style后面加上内容
<style lang='scss'>
$a:#fff;
$b:red;
h1 {
  color: $a;
  background: $b;
}
</style>

31. webpack配置中的压缩css文件
路径：'https://www.webpackjs.com/plugins/css-minimizer-webpack-plugin/#getting-started'

下载命令：'npm install css-minimizer-webpack-plugin --save-dev'

注意：需要在webpack.config.js中引入内容
图片：

在这里插入图片描述

并且需要在里面新增一个内容
内容:‘minimize: true,’
在这里插入图片描述
完整代码:

// webpack的配置文件
// 导入路径处理模块path
const path = require('path');
// 导入处理html文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 导入VueLoaderPlugin: 处理.vue文件的插件
const { VueLoaderPlugin } = require('vue-loader');
// 导入处理css的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 导入压缩css的插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 引入mockjs
var Mock = require('mockjs');
// 导出一个对象
module.exports = {
  // 生成source-map映射文件
  devtool:'source-map',

  // 设置打包环境为:开发模式
  mode: 'development',
  // 单入口: webpack要对那个文件进行处理 
  // entry: './src/index.js',

  // 多入口
  entry: {
    index: './src/index.js',
  },

  // 出口: webpack处理之后的文件的存放目录  
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // 在生成文件之前清空 output 目录
    clean: true,
  },

  module: {
    rules: [
      // ... 其它规则
      // 匹配.vue文件, 然后处理.vue文件
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 处理css文件的loader
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      // 处理 scss文件的loader 
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          // 'style-loader', // 替换成：MiniCssExtractPlugin.loader
          MiniCssExtractPlugin.loader,
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
    ]
  },

  plugins: [
    // 将打包处理的js文件自动引入某个html中
    new HtmlWebpackPlugin({
      // 此处需要提供一个绝对路径
      template: path.resolve(__dirname, 'index.html'),
    }),
    // 处理.vue文件的插件
    new VueLoaderPlugin(),
    // 处理css的插件
    new MiniCssExtractPlugin()
  ],
  
  // devserver配置
  devServer: {
    // 对打包文件继续进行压缩
    compress: true,
    // 指定开发服务器监听的端口
    port: 8080,
    // 模块热替换
    hot: true,
    // 自动打开默认浏览器
    open: true,
    // 配置代理
    // 当我们访问  /api地址的时候, 自动将这个请求发送给 http://localhost:3000/api
    proxy: {
      '/api': 'http://localhost:5000',
    },
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }
      // 编写数据接口的示例代码
      // devServer.app.get('/setup-middleware/some/path', (_, response) => {
      //   response.send('setup-middlewares option GET');
      // });
      // 轮播图列表
      var data = Mock.mock({
        'list|4': [
          "@image(400x200,@color)"
        ]
      });

      //编写数据接口
      devServer.app.get('/imgs', (req, res) => {
        res.send(data.list);
      });

      return middlewares;
    },

  },

  resolve: {
    // 给src目录配置别名:@
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
    // 配置可以省略的文件后缀
    extensions: ['.js', '.json', '.wasm', '.vue'],
  },
  // 压缩css的配置
  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      // `...`,
      new CssMinimizerPlugin(),
    ],
    minimize: true,
  },
};

注意：需要从新使用命令进行启动'npm run build'

在这里插入图片描述

32. 设置gizp压缩

路径：‘https://www.webpackjs.com/plugins/compression-webpack-plugin/#root’
命令：'npm install compression-webpack-plugin --save-dev
’
注意： 在webpack.config.js中写内容
在这里插入图片描述
代码：

代码：
plugins: [
    // 将打包处理的js文件自动引入某个html中
    new HtmlWebpackPlugin({
      // 此处需要提供一个绝对路径
      template: path.resolve(__dirname, 'index.html'),
    }),
    // 处理.vue文件的插件
    new VueLoaderPlugin(),
    // 处理css的插件
    new MiniCssExtractPlugin(),
    // 开启gzip压缩 
    new CompressionPlugin()
  ],

33. webpack处理本地资源图片

路径：‘https://www.webpackjs.com/guides/asset-management/#loading-images’

注意：需要赋值的内容
在这里插入图片描述
注意：如果有其他的后缀名可以进行新增

34. 设置icon图标

路径：‘https://www.webpackjs.com/guides/asset-management/#loading-fonts’
图片：
在这里插入图片描述

35. 解析es6和js的一些高级语法

路径：‘https://www.webpackjs.com/loaders/babel-loader/#root’ 命令:‘npm
install -D babel-loader @babel/core @babel/preset-env’
复制的内容:
在这里插入图片描述

36. webpack设置’tree shaking’

路径：‘https://webpack.docschina.org/guides/tree-shaking/’
作用：‘让webpack打包的时候, 将没有用到的代码剔除掉’
图片：
在这里插入图片描述

麻辣虾头
关注
  • 29
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack打包
06-06
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack
qq_44912359的博客
02-13 923
webpack
《二十四》运行 webpack 命令的启动流程
花铛
11-06 169
webpack.jswebpack.jsrun()总结来说，执行时，会先去执行，目的就是为了把打包命令中的参数和配置文件中的配置进行合并；然后再真正执行 Webpoack。不同的版本可能会略有差异，此处是和。mac 和 windows 中文件的位置不同，此处是 mac 中的文件路径。
webpack项目配置与启动流程
拖鞋先生
08-20 2061
创建项目 npm init //然后依次填写相应信息 { "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } 当
webpack入门启动webpack工程
BADAO_LIUMANG_QIZHI的博客
10-11 2371
前提： 安装完webpack以及webpack-dev-server 参照： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83011108 添加代码： 1.首先在目录demo下创建一个js文件：webpack.config.js 并初始化它的内容： var config = { }; module.exp...
一个简单的webpack3启动项目可用于您的基本Web开发需求
08-11
一个简单的webpack3启动项目，可用于您的基本Web开发需求
Webpack笔记.md
04-13
webpack的搭建和项目的整体的构架
webpack demo
07-13
webpack demo
webpack.md
02-27
自学webpack 笔记 webpack只是一个打包模块的机制，只是把依赖的模块转化成可以代表这些包的静态文件。并不是什么commonjs或者amd之类的模块化规范。webpack就是识别你的 入口文件。识别你的模块依赖，来打包你的...
webpackDemo
08-23
依据webpack官方文档，指南手册整合得demo，让你充分了解打包得全过程。
webpack文档
07-05
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有...
vue init webpack 依赖的webpack包
09-05
解决vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 20.205.243.166:443问题，方便在https://github.com/vuejs-templates/webpack 不通的时候下载。 使用方法： 1、将webpack放到C...
webpack.zip
01-28
1.webpack 分享PPT 2.loader demo 3.plugin demo 4.webpack常用配置demo 5.bapable实现demo
如何开启一个简单的webpack项目
独酌101112的博客
08-01 729
建立一个空文件夹，随便命名 进入该文件夹，命令行输入npm init -y快速初始化该项目 在该文件夹下，建立源码文件src和打包产品目录文件dist 在src目录下新建index.html 命令行输入cnpm -i webpack -D下载webpack 命令行输入cnpm -i webpack-cli -D，在webback4.x以后，webpack命令行不再提供打包构建服务，注意打包入口是：src->index.js 出口是：dist->main.js 在package.json中设置打.
webpack 4.x项目快速启动
xyphf的博客
04-01 3750
本次项目基于node 8.4 环境，低版本跑不起来勿吐槽。webpack至少要是4.1.0以上版本。 win10系统运行cmd窗口，需要选择“以管理员身份运行” 下面贴出所有的demo代码 package.json { "name": "runxadmin", "version": "1.0.0", "description": "", "mai
开始一个React项目（一）一个最简单的webpack配置
热门推荐
dengdengda的博客
09-08 2万+
目前react搭配webpack使用就像豆浆配油条一样常见，我主要总结一下开始一个react项目需要安装的一些插件以及需要配置的webpack，比如支持JSX语法，ES6语法，打包js，支持eslint代码检查等等。
webpack config
最新发布
05-18
Webpack是一个现代化的JavaScript应用程序打包工具。Webpack 可以将多个 JavaScript 文件打包成一个文件，同时还可以将 CSS、图片等资源也打包到一起。Webpack 的配置文件是 webpack.config.js，它是一个 CommonJS 模块。在配置文件中，我们可以定义入口文件、输出文件、加载器、插件等信息。 下面是一个简单的Webpack配置示例： ``` const path = require('path'); module.exports = { entry: './src/index.js', // 入口文件 output: { // 输出文件 filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { // 加载器 rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] }, plugins: [ // 插件 // ... ] }; ``` 以上配置中，我们指定了入口文件为 `./src/index.js`，输出文件为 `dist/bundle.js`，并且使用了一个名为 `babel-loader` 的加载器来转换 JavaScript 代码。同时，我们也可以在配置文件中添加插件，如 `UglifyJSPlugin` 来压缩代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值