webpack打包html,js,css

npm install babel-loader --save

cnpm i html-webpack-plugin --save

打包css资源类文件涉及的东西有很多，比如css/less/sass...本次案例涉及到的是css、less

因为涉及到css和less，所以需要的插件也多了一些

首先，下载相关依赖

yarn add css-loader -D

yarn add style-loader -D

yarn add less less-loader -D

yarn add mini-css-extract-plugin -D

yarn add optimize-css-assets-webpack-plugin -D

yarn add uglifyjs-webpack-plugin -D

一点点看，首先说loader，loader是什么?做什么的? 它就是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.sass或A.less转变为B.css，单纯的文件转换过程!

mini-css-extract-plugin 抽离css文件的作用

optimize-css-assets-webpack-plugin 压缩css(webpack4.x)的方法

用这些插件打包之后我们会发现，css的确被抽离和压缩打包了，但是js文件会变的无法压缩，所以需要下面这个插件进行js的压缩

uglifyjs-webpack-plugin 压缩js

代码敲起来！

ps>>要实现的功能：成功打包html文件、js文件、css文件、sass文件，将打包编译好的css文件输出到dist/css文件夹下，并且被dist/index.html引用

src目录下我们新建3个样式文件，分别为index.css/a.css/b.sass

//index.css
@import './a.css';
body:{
   background:red;
}

//a.css
@import './b.less';
div:{
   background:blue;
}

//b.less
h4:{
   color:yellow
}

样式文件已经创建完毕，我们如何进行引用呢？这时候，我们可以使用require语法进行引用

//src/index.js
require('./index.css')

现在开始编写webpack.config.js主要逻辑

//webpack.config.js
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let OptimizeCss = require('optimize-css-assets-webpack-plugin');
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
   mode:'development',
   entry: './src/index.js',
   output: {
      filename:'bundle.js',
      path: path.resolve(__dirname,'dist')
   },
   plugins: [
      new MiniCssExtractPlugin({
         filename:'css/main.css'  //css的输出路径
      }),
      new HtmlWebpackPlugin({
         template:'./src/index.html',
         filename:'index.html',
         hash:true,
         minify: {
            collapseWhitespace:true
         }
      })
   ],
   module: {
      rules: [
         {
         	test:/\.js$/,
         	use: {
         	   loader:'bebel-loader',
         	   options: {
         	      presets: ['@babel/preset-env'],
         	      plugins: [
         	         ['@babel/plugin-proposal-decorators',{'legacy':true}],
         	         ['@babel/plugin-proposal-class-properties',{'loose':true}]
         	      ]
         	   }
            }
         },
         {
         	test: /\.css$/,
         	use: [
         	   MiniCssExtractPlugin.loader,
         	   'css-loader'
         	]
         },
         {
         	test:/\.less$/,
         	use: [
         	   MiniCssExtractPlugin.loader,
         	   'css-loader',
         	   'less-loader'
         	]
         }
      ]
   }
}

如此这般，这般如此之后，我们运行 npx webpack，就可以看到dist文件夹下就会有一个css的文件夹,里面有我们指定的，名字为main.css的文件,里面会有这些内容

body >h2 {
   color :yellow;
}
div{
   background: blue;
}

body{
   background:red;
}

右键dist/index.html文件在浏览器打开，我们会发现这些样式已经全部都应用到了页面中...

至此，利用webpack成功的打包了js文件，html文件，css文件...