webpack基本配置

首先注意，webpack配置是在 node.js 平台下运行的，所以，模块化采用的commonJs模块化。

基本配置的五大核心概念：

入口entry：指定webpack从哪个文件开始打包。

出口output：指示webpack打包完的文件输出到哪里去。

加载器module：webpack本身只能处理js、json文件格式，要处理其他格式文件需要借助loader，webpack才能解析；

插件 plugins，扩展webpack的功能；

模式mode：分为开发模式development，生产模式production

npx webpack 这句代表，按照webpack.config.js配置来执行操作。

npx webpack ./src/main.js --mode==development 代表 按照指定入口文件执行操作。

接下来处理样式资源，包含css资源，less资源，sass资源，和stylus资源

第一步，在微博pack.config.js文件 loader进行配置；例如，如下代码：

const path = require('path'); //nodejs 的核心模块，专门用来处理路径问题
module.exports = {
  // 入口
  entry: './src/main.js', //相对路径
  // 输出
  output: {
    // __dirname  nodejs的变量，代表当前文件所在的文件夹目录
    path: path.resolve(__dirname, 'dist'), //绝对路径
    filename: 'main.js' //文件名
  },
  // 加载器
  module: {
    rules: [
      //loader的配置
      // css loader配置
      {
        test: /\.css$/i,
        use: [
          //执行顺序 从下网上，先执行下边的；或者是从右往左。
          "style-loader", //将js中的css通过创建style标签添加到html文件的head中生效
          "css-loader" //将css资源编译成 commonjs的模块到js中
        ],
      },
      // less loader 配置
      {
        test: /\.less$/,
        // loader:'xxx' //只能使用一个loader  use可以使用多个loader
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //sass 配置
      {
        test: /\.s[ac]ss$/, //这里中括号，代表其中任何一个都可以，例如.sass 或者.scss
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ]
  },
  // 插件
  plugins: [
    //plugins的配置
  ],
  // 模式
  mode: 'development'
}

第二步，安装所需的包，例如npm i less less-loader -D；

第三步，在入口文件（我的是src下的main.js文件）引入样式资源；

第四步 执行npx webpack