webpack开发环境基本配置,打包样式资源

古城微笑少年丶 2023-07-18 03:26 21阅读 0赞

webpack开发环境基本配置

## 1，创建配置文件 ##

1.1 创建文件webpack.config.js  
1.2 配置内容如下

const {resolve} = require('path');   //node内置核心模块，用来处理路径问题
    
    module.exports ={
    	entry:''./src/js/index.js,//入口文件
    	output:{
    		filename:'./built.js',   //输出文件路径配置
    		path:resolve(__dirname,'build/js')    //输出文件路径配置
    
    	},
    	mode:'development'    //开发环境
    };

1.3 运行指令：webpack

2 打包样式资源  
2.1，创建文件  
![在这里插入图片描述][20200324094823205.png]  
2.2 下载安装loader包

> npm i css-loader style-loader less-loader less -D

2.3 修改配置文件

/*
      webpack.config.js  webpack的配置文件
        作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）
    
        所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。
    */
    
    // resolve用来拼接绝对路径的方法
    const { resolve } = require('path');
    
    module.exports = {
      // webpack配置
      // 入口起点
      entry: './src/index.js',
      // 输出
      output: {
        // 输出文件名
        filename: 'built.js',
        // 输出路径
        // __dirname nodejs的变量，代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build')
      },
      // loader的配置
      module: {
        rules: [
          // 详细loader配置
          // 不同文件必须配置不同loader处理
          {
            // 匹配哪些文件
            test: /\.css$/,
            // 使用哪些loader进行处理
            use: [
              // use数组中loader执行顺序：从右到左，从下到上 依次执行
              // 创建style标签，将js中的样式资源插入进行，添加到head中生效
              'style-loader',
              // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
              'css-loader'
            ]
          },
          {
            test: /\.less$/,
            use: [
              'style-loader',
              'css-loader',
              // 将less文件编译成css文件
              // 需要下载 less-loader和less
              'less-loader'
            ]
          }
        ]
      },
      // plugins的配置
      plugins: [
        // 详细plugins的配置
      ],
      // 模式
      mode: 'development', // 开发模式
      // mode: 'production'
    }

2.4 运行指令

> webpack

[20200324094823205.png]: /images/20230528/79a7d6b6ba2146359a3ef5f998f5f0bc.png