swebpack 之sass scss（sass-loader node-sass）打包 -7

1：确保自己的电脑已经安装了node和Git软件
2：自己在盘里随便创建一个文件夹一般为英文(也就是你自己的项目名称)
3：在新创建好的文件夹里面右键点击调出git指令窗口在窗口里面输入如下指令：
    1：npm install webpack -g            

    2:  npm install webpack-cli -g

    3: npm init -y

    4: npm install webpack --save-dev

   5  npm install html-webpack-plugin    （html编译插件）

  6：npm install clean-webpack-plugin

  6.1  npm install webpack-dev-server   (服务插件)

  6.2  npm install style-loader css-loader  （css打包插件）

 6.3 npm install file-loader url-loader    (文件图片打包插件)

6.4 npm install less-loader    (less打包插件)

6.5 npm install sass scss --save-dev       （sass scss打包插件）

6.6 npm install sass-loader nade-sass      (sass打包插件)

7新建一个src文件夹  和  less文件夹       和webpack.config.js 

   8：把项目拖进编辑器

9:要引入sass的js里面进行引入sass

import('../sass/index.scss');

10：webpack.config.js 里面配置如下：

const path = require("path");
const WebpackHtmlPlugin = require('html-webpack-plugin');
const CleanwebpackPlugin = require('clean-webpack-plugin');

module.exports = {
	entry: {
		index: './src/index.js',
		index2: './src/index2.js'
	},
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "[name].js"
	},
	plugins: [
		new WebpackHtmlPlugin({
			minify: {
				collapseWhitespace: true, //清除空格
				removeAttributeQuotes: true, //清除多余引号
				removeComments: true //删除注释

			},

			title: "tttttttt",
			template: "./src/index.html",
			chunks: ['index'],
			filename: "index.html"

		}),
		new WebpackHtmlPlugin({
			minify: {
				collapseWhitespace: true, //清除空格
				removeAttributeQuotes: true, //清除多余引号
				removeComments: true //删除注释

			},

			title: "ttttttt2",
			template: "./src/index2.html",
			chunks: ['index2'],
			filename: "index2.html"

		}),
		new CleanwebpackPlugin()

	],
	devServer: {
		contentBase: path.resolve(__dirname, "dist"),
		host: "localhost",
		port: 8092,
		open: true
	},
	module: {
		rules: [{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},

			{
				test: /\.(png|jpg|gif)$/,
				use: [{

						loader: "url-loader",
						options: {
							limit: 1000
						}
					}

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

			{
				test: /\.(scss|sass)$/,                                 //sass模块
				use: [

					'style-loader', 'css-loader', 'sass-loader'
				]
			}

		]
	}
}

11：

8：package.json  scripts配置如下：

 "scripts": {
    "build": "webpack --mode production",
    "dev":"webpack-dev-server --mode production"
  },

9：要打包的html  title处需配置

10：执行命令进行打包 npm run build  

11：开启本地服务npm run dev