webpack4.x急速入门指南

1》全局安装
webpack3.x
npm install webpack -g

webpack4.x
npm install webpack-cli -g

2》初始化，生成package.json
npm init

3》局部安装
npm install webpack -s
npm install webpack-cli -s


4》打包
默认entry：src/index.js(要打包的文件)
默认output：dist/main.js（打包后的东西放在这个里面）

直接输入webpack(这是webpack4 )

输入webpack a.js  b.js（这是webpack3的）

打包环境：
webpack --mode production（生产环境，默认）

webpack --mode development(开发环境)
 



webpack 本身是打包js，但是css,html,图片也可打包，必须要进行的相关配置



》》》》》配置
   1.四个核心概念
     入口（entry）
     输出（output）

     loader
   （处理一些非JS文件，例如css、html、图片）

    插件（plugins）
  （有效的打包或者压缩css、html、js、图片，一般与loader配合使用）

2.配置文件
命名：webpack.config.js（在该文件中配置你webpack的文件的入口、出口等一系列）


3.package.json中的scripts参数可以配置命令哦

例如："scripts":{
      "start":"webpack --mode developme"
       }



》》》》》本地服务器（dev-server）
   安装：

    npm install webpack-dev-server -S

   之后在webpack.config.js中配置如下：
    devServer:{
       contentbase:"./xzl"/*服务器文件夹路径*/
       port:"3000"/*端口*/
       line:true/*实时刷新*/

       }
      
如果要运行，还需在package.json中的scripts中配置

   "dev":"webpack-dev-server --open --inline"


》》》》》》loader:加载程序

》》》》配置CSS的loader(需要style-loader和css-loader)

  先下载css的loader
    cnpm install style-loader css-loader -s

    cnpm install file-loader -s

   在webpack.config.js中配置示例如下：

 module:{
    rules:[
       {
          test:/\.css$/,
          use:['css-loader','css-loader']
       },
       {
          test:/\.(jpg|png|gif)$/,
          use:'file-loader'
       }
          ]
        }



》》》》》》插件《《《《《《


  html-webpack-plugin      /*打包html文件的*/


    src:开发阶段（写代码）

     目录下要有：
       index.html
       index.js
       style.css
       1.jpg,2.jpg......


  dist: 生产阶段（项目要上线）


》》》》》使用
   1.安装
    npm install html-webpack-plugin -S

   2.在webpack.config.js中配置
   在文件头引入插件
    const HtmlWebpackPlugin=require("html-webpack-plugin")

  然后。。。。在配置体中加入代码，示例如下：

     plugins:[
           new HtmlWebpackPlugin({   /*额。。。。可以不用填吧*/
           template:".src/index.html"    /*包含开发环境中的html文件*/

           minify{
                  removeAttributeQuotes:true,     /*去引号*/
                  removeComments:true,            /*去注释*/
                  removeEmptyAttributes:true,     /*去空属性*/
                  collapseWhitespace:true         /*去空格*/
 
              }    
           })
             ]