webpack打包

最新推荐文章于 2023-03-06 21:47:03 发布

爪哇

最新推荐文章于 2023-03-06 21:47:03 发布

阅读量6.1k

点赞数 5

分类专栏： Web前端

记录平时的问题，完全是给自己看的，垃圾博客，浪费各位大佬时间...

本文链接：https://blog.csdn.net/qq_40794973/article/details/95534677

版权

Web前端专栏收录该内容

24 篇文章 2 订阅

订阅专栏

一、打包css

index.js

import avatar from './avatar.jpg';
// 引入 scss 文件
import './index.scss';

var img = new Image();
img.src = avatar;
img.classList.add('avatar');

var root = document.getElementById('root');
root.append(img);

index.scss

// scss语法
body {
	.avatar {
		width: 150px;
		height: 150px;
		// postcss-loader 需要配置postcss.config.js
		transform: translate(100px, 100px);
	}
}

webpack.config.js

const path = require('path');

module.exports = {
	mode: 'development',
	entry: {
		main: './src/index.js'
	},
	module: {
		rules: [{
			test: /\.(jpg|png|gif)$/,
			use: {
				loader: 'url-loader',
				options: {
					name: '[name]_[hash].[ext]',
					outputPath: 'images/',
					limit: 10240
				}
			} 
		},{

			// ！loader处理是是有顺序的，从下往上
			// 处理css style-loader css-loader 来处理 （npm install style-loader css-loader）

			// .sass 需要先转换为 css 然后挂载到页面
			// 世界上最成熟、最稳定、最强大的专业级CSS扩展语言！ https://www.sass.hk/
			// npm install sass-loader node-sass webpack --save-dev
			// https://webpack.js.org/loaders/sass-loader/
			test: /\.scss$/,
			use: [
				'style-loader', 
				'css-loader', 
				'sass-loader',
				// postcss-loader用来添加厂商前缀的（-webkit-transform）
				// https://webpack.js.org/loaders/postcss-loader/
				'postcss-loader'
			]
		}]
	},
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	}
}

postcss.config.js

module.exports = {
  plugins: [
    // 需要安装插件
    //  npm install autoprefixer -D
  	require('autoprefixer')
  ]
}

package.json

{
  "name": "lesson",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bundle": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.6.1",
    "css-loader": "^1.0.1",
    "file-loader": "^2.0.0",
    "node-sass": "^4.10.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack-cli": "^3.3.5"
  },
  "dependencies": {
    "webpack": "^4.25.1"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id='root'></div>
	<script src='./bundle.js'></script>
</body>
</html>