Webpack V5.65.0配置标准开发环境

Webpack安装&使用

安装

npm install webpack webpack-cli -D

使用方式

方式一

./node_modules/.bin/webpack --version

方式二

npx webpack --version

入口(entry)

**入口起点(entry point)**指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

出口(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist

const config = {
   
    entry: './src/index.js',
    output: {
   
        filename: 'bundle.js',
        path: path.join(__dirname, './dist')
    }
}

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

让webpack处理CSS文件

webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这种情况下，以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader。

• 下载依赖loader

  npm install --save-dev css-loader
  npm install --save-dev style-loader
  

• 编写规则，匹配哪些后缀使用哪些loader webpack.config.js

  module:{
       
      rules:[
          {
       
              test:/\.css$/,
              use:['style-loader','css-loader']
          }
      ]
  }
  

• loader链式传递，先从后面的loader开始

让webpack处理scss文件

• 下载依赖loader

  npm install sass-loader node-sass -D
  

• 编写规则

  module:{
       
      rules:[
          {
       
              test:/\.(scss|sass)$/,
              use:[