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

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，创建文件

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