快速搭建webpack配置

下面配置完最终打包并运行项目 yarn dev

1. 创建项目名称 webacpk-demo : 不能是大写 不能是webpack
2. 使用yarn init -y生成package.json 文件
3. 创建两个文件夹 src/(源代码文件夹) 和 dist/(最终打包输出的文件夹)
4. 在 src 里面创建一个 index.js 文件 (准备要被打包的入口文件)
5. 安装依赖包 yarn add webpack webpack-cli -D
6. 添加脚本 : dev

"dev": "webpack serve --config webpack.config.js --hot"

7.1 在根目录创建webpack.config.js文件
7.2 添加配置

// 因为 webpack 是基于 node
// 所以在配置文件里面 我们可以直接使用 node 的语法
const path = require('path')

module.exports = {
  // 入口
  entry: path.join(__dirname, './src/index.js'),

  // 出口
  output: {
    // 目录
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js',
  },
  // development` : 开发阶段  (不压缩)
  // production` :  发布阶段 (压缩)
  mode: 'development',
}

配置插件:html-webpack-plugin
配置

第一步: 引入模块
const htmlWebpackPlugin = require('html-webpack-plugin')
第二步: 配置
// 插件
plugins: [
  // 使用插件 指定模板
  new htmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html')
  })
]

处理css文件
安装 : yarn add style-loader css-loader -D
配置

// loader
module: {
  rules: [
      //1.处理 css
      // 注意点 use执行loader 顺序 从右往左
      // css-loader  :  读取css文件内容,将其转化为一个模块
      // style-loader : 拿到模块, 创建一个style标签,插入页面中
    { test: /\.css$/, use: ['style-loader', 'css-loader'] }
  ]
}

处理less文件
安装 : yarn add less-loader less style-loader css-loader -D
配置

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

处理图片
安装 : yarn add -D url-loader file-loader
配置

// 处理图片
  { test : /\.(jpg|png|gif)$/, use : ['url-loader'] },

开发阶段

1. webpack-dev-server
安装 :yarn add webpack-dev-server -D
配置

module.exports = {
	# 自动打开浏览器
	 devServer: {
	    open: true,
	    port:8080 // 默认打开端口号
	}
}

语法降级es6->es5
yarn add -D babel-loader @babel/core @babel/preset-env
方式一:配置

module.export = {
	module: {
	  rules: [
	    {
	      test: /\.js$/,
	      exclude: /node_modules/,
	      use: {
	        loader: 'babel-loader',
	        options: {
	          presets: ['@babel/preset-env']   // 处理es6-最新   
	        }
	      }
	    }
	  ]
	}
}

方式二: 或者 创建 .babelrc

{
  "presets": ["env"]
}

最终webpack.config.js文件为

// 因为 webpack 是基于 node
// 所以在配置文件里面 我们可以直接使用 node 的语法
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 入口
  entry: path.join(__dirname, './src/index.js'),
  // 出口
  output: {
    // 目录
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js',
  },
  // mode
  mode: 'development',
	plugins: [
		// 使用插件 指定模板
		new htmlWebpackPlugin({
			template: path.join(__dirname, './src/index.html')
		})
	],
	module: {
		rules: [
				//1.处理 css
				// 注意点 use执行loader 顺序 从右往左
				// css-loader  :  读取css文件内容,将其转化为一个模块
				// style-loader : 拿到模块, 创建一个style标签,插入页面中
			{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
			//2.处理 less
			{ test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] },
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env']   // 处理es6-最新   
					}
				}
			}
		]
	},
	devServer:{
		port:8080,
		open:true
	}
}

package.json文件为

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack serve --config webpack.config.js --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.4",
    "html-webpack-plugin": "^5.3.1",
    "less": "^4.1.1",
    "less-loader": "^8.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.35.1",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@babel/core": "^7.13.16",
    "@babel/preset-env": "^7.13.15",
    "babel-loader": "^8.2.2"
  }
}