webpack和npm

一、npm包管理文件

　　安装命令：npm init -y

二、创建webpack.config.js配置文件

　　entry      //入口文件

　　moudle  //loader打包css、less、图片资源等等

　　plugins  //插件打包html

　　output   //输出

　　mode    //模式 development开发模式 production生产模式

三、安装webpack、webpack-cli

　　　　安装命令：npm i webpack webpack-cli -D

四、安装一些常用的包

　　打包HTML

　　　　安装命令：npm i html-webpack-plugin -D

　　打包CSS

　　　　style-loader将模块导出的内容作为样式并添加到 DOM 中

　　　　安装命令：npm install --save-dev style-loader

　　　　css-loader加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码

　　　　安装命令：npm install --save-dev css-loader

　　实现自动刷新webpack-dev-server

　　　　webpack-dev-server就是一个小型的nodejs的服务器

　　　　安装命令：npm install --save-dev webpack-dev-server

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
        index:'./src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
      },
    module: {
        rules: [{ 
                test: /\.css$/, 
                use: ['style-loader','css-loader'] ,
                }],
      },
    plugins: [
        new HtmlWebpackPlugin({ 
            template: './src/index.html' ,
            filename:'index.html',
            chunks:['index'],
            minify:{
                collapseWhitespace:true, //去空格
                removeComments:true      //去除注释
            }
            })
        ],
        mode:'development'
};