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处需配置

<title><%=htmlWebpackPlugin.options.title%></title>

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

11：开启本地服务npm run dev