webpack打包样式以及配置

1. 下载npm install webpack webpack-cli -g 项目的文件夹cmd里面

2. 初始化pack.json 命令：npm init -y

3. 下载webpack 命令： npm install webpack webpack-cli -D

4. 在项目的页面建文件夹,比如放css的，sacc的，less的几个样式对应文件夹

5. 在main.js（页面也可以取别的名字）中引入，建立的文件夹里面的内容(所有要打包的东西，都引入里面，相当于一个入口)

6. 就可以打包了，cmd：webpack ./main.js (没有配置入口 就必须带上要打包的文件名字)

6.1 打包配置：建立一个页面是配置的 webpack.config.js

7.下面a.入口有配置样式的规则，查看webpack官方文档，以及要下载对应的样式

a.入口

const path = require('path');

module.exports = {

// 入口,

// 因为main.js里面把要打包的东西都引入里面了

entry: './main.js',

// 打包成dist文件夹，里面的名字hello的js

output: {

path: path.resolve(__dirname, 'dist'),

filename: 'hello.js',

},

// 配置样式的规则，需要参照文档进行下载样式(样式在main.js引入过)

// 配置，参照webpack里面的，例如搜索css,less

module: {

rules: [

{

test: /\.css$/i,

use: ["style-loader", "css-loader"],

},

{

test: /\.less$/i,

use: ['style-loader', 'css-loader', 'less-loader'],

},

{

test: /\.s[ac]ss$/i, //可以是sacc，scss

use: ['style-loader', 'css-loader', 'sass-loader',

],

},

],

},

8.mode: 'development',

}