Webpack

开发中我们常常要使用模块化的方式，在过程中往往需要使用webpack，Webpack是模块管理和打包工具，它可以识别我们代码中的依赖，打包代码，webpack支持的模块化的方式有AMD，comment.js，ES6，css/less/sass，url

模块打包

文件目录和结构

   

打包过程图

安装过程

安装webpack过程：安装node→查看安装路径指定安装和缓存路径→配置环境变量→全局安装webpack（一劳永逸）

1.cmd下用path指令查看node安装目录(我的为D:\node)

2.在node下创建node_cache和node_global目录

3.cmd下配置全局安装和缓存路径

    npm config set cache "D:\node\node_global''

    npm config set prefix "D:\node\node_global''

4.控制面板\系统和安全\系统>高级系统设置下设置环境变量

     用户变量:PATH添加D:\node\node_global

     系统变量NODE_PATH:D:\node\node_global

5..全局安装webpack

    cnpm install --save-dev webpack -g

6..全局安装webpack-cli

    cnpm install --save-dev webpack-cli -g

7.全局安装webpack-dev-server

     cnpm install --save-dev webpack-dev-server -g

查看node版本：node-v

查看webpack版本：webpack -v

全自动打包项目

打包项目过程：mkdir建目录(dist src script style)→初始化→本地安装webpack和webpack-cli→文件(index.html )→打包

1.建目录mkdir

mkdir config dist src

2.初始化,生成package.json

webpack init -y

3.本地安装webpack和webpack-cli

cnpm install --save-dev webpack webpack-cli

4.建文件

touch dist/index.thml src/index.js

5打包生成node_module

webpack --mode=development

配置单入口项目

1.移除main.js和index.js

main.js在打包的时候生成，而index.js是默认入口

2.创建main.js

touch src/main.js

2.touch创建配置文件webpack.config.js

touch config/webpack.config.js

3.写配置文件内容

配置文件webpack.config.js用来指定入口文件及输出,使用comment.js语法

const path = require('path');
module.exports = {
  mode:'development',
  entry:{
      main:'./src/main.js',
    }, 
  output:{
    path:path.resolve(__dirname,'../dist'),  //打包的路径(绝对路径)
    filename:'[name].js'  //按入口文件命名打包成的文件名
  },
  //模块
  module:{
      rules:[]
  },  
  plugins:[],   / //插件
  devServer:{}  //服务功能配置
}

4.在package.json中指定配置文件

"scripts": {
    "build":"webpack --config=config/webpack.config.js"
  }

5.cnpm run build //运行webpack

开启服务

前提是安装好了webpack-dev-server

1.webpack.config.js中配置devserver

devServer:{
      contentBase:path.resolve(__dirname,'../dist'), //基本目录结构
      host:'localhost',  //ip地址
      compress:true, //开启服务器端压缩
      port:8888 //端口
  } //服务功能配置

2.package.json中添加server

"scripts": {

"build":"webpack --config=config/webpack.dev.js",

"server":"webpack-dev-server --config=config/webpack.dev.js"  //添加server

}

 3.开启服务:cnpm ren server

资源文件处理

打包css

有引入css的可以使用

1..下载css-loader和style-loader

    cnpm install css-loader style-loader --save-dev

2.webpack.config.js的module中配置css的依赖

module:{
      rules:[
          //css loader
          {
              test:/\.css$/,
              use:[
                  {loader:"style-loader"},
                  {loader:"css-loader"}
              ]
          }
      ]
  }

3..cnpm run server

终端出现下图即成功

压缩js

webpack4使用压缩js代码插件uglifyjs插件的前提是项目内安装了webpack和webpack-cli，项目初始化过，且项目名不能为webpack，有引入js代码的场景可以使用

1.cnpm install uglifyjs-webpack-plugin --save-dev  //本地安装uglifyjs

2.配置

    webpack.config.js引入js压缩插件

const uglify = require('uglifyjs-webpack-plugin');

    webpack.config.js的plugins中创建实例

plugins:[new uglify()]

3.npm run  build

dis静态资源文件中出现js压缩后的文件即成功

压缩html

有html文件的场景可以使用

1.安装html-webpack-plugin 

    cnpm install --save-dev html-webpack-plugin 

2.webpack.config.js中配置

    webpack.config.js引入html压缩插件

const htmlPlugin = require('html-webpack-plugin');

    webpack.config.js的plugins中创建实例

plugins:[
new htmlPlugin({
            minify:{ //是对html文件进行压缩
                removeAttributeQuotes:true  //removeAttrubuteQuotes是却掉属性的双引号。
            },
            hash:true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
            template:'./src/index.html' //是要打包的html模版路径和文件名称。
           
        })
]

3.cnpm run build

压缩图片

有引入图片的场景可以使用

1.安装解析图片loader

    cnpm install --save-dev file-loader url-loader

2.webpack.config.js module中配置loader

{
   test:/\.(png|jpg|gif|jpeg|JPG)/,  //是匹配图片文件后缀名称
   use:[{
       loader:'url-loader', //是指定使用的loader和loader的配置参数
       options:{
           limit:500  //是把小于500B的文件打成Base64的格式，写入JS
               }
        }]
}

3.cnpm run build 

分离css

1.分离插件

    npm install --save-dev extract-text-webpack-plugin@next 

2.webpack.config.js中配置

   webpack.config.js引入插件

const extraTextPlugin = require('extract-text-webpack-plugin'); //引入css分离插件

     webpack.config.js的plugins中创建实例

new extractTextPlugin("css/index.css")

      webpack.config.js的module中修改css-loader配置项

{
     test:/\.css$/,
     use: extractTextPlugin.extract({
         fallback: "style-loader",
         use: "css-loader"
     }),        
}

3.cnpm run build

 

路径处理

1.webpack.config.js 声明website

var website ={
    publicPath:"http://localhost:8888/"  //主机和端口
}

2.webpack.config.js的output中配置publicPath

output:{
        publicPath:website.publicPath  //publicPath：主要作用就是处理静态文件路径的。
    }

处理HTML中的图片

适用场景：html中用<img src>引用图片及把图片放在指定路径下

1.安装loader

    cnpm install html-withimg-loader --save-dev 

2.webpack.config.js的module中配置

//url loader
{
    test:/\.(png|jpg|gif|jpeg)/,  //是匹配图片文件后缀名称
    use:[{
        loader:'url-loader', //是指定使用的loader和loader的配置参数
        options:{
            limit:500,  //是把小于500B的文件打成Base64的格式，写入JS
            outputPath:'images/',  //打包后的图片放到images文件夹下
                 }
      }]
}
//html处理图片loader
{
    test: /\.(htm|html)$/i,
    use:[ 'html-withimg-loader'] 
}

3.cnpm run dev

less，sass打包和分离

1.安装

    npm install --save-dev less less-loader  //less服务和less-loader

    npm install --save-dev  node-sass sass-loader  //sass

    npm install --save-dev extract-text-webpack-plugin@next  //安装分离插件

2.webpack-dev.config中配置

    webpack-dev.config中引入分离插件

const extraTextPlugin = require('extract-text-webpack-plugin'); //引入分离插件

    webpack.config.js的plugins中创建实例

 

.    webpack-dev.config的module配置less-loader

//less只打包
{
    test: /\.less$/,
    use: [{
        loader: "style-loader" // creates style nodes from JS strings
    }, 
    {
        loader: "css-loader" // translates CSS into CommonJS
    },
    {
        loader: "less-loader" // compiles Less to CSS
    }]
 }
//less打包+分离
{
    test: /\.less$/,
    use:extractTextPlugin.extract({
        fallback: "style-loader",
        use: [
            {loader:"css-loader"},
            {loader:"less-loader"}
        ]
    }) 
},
//sass打包+分离
{
    test: /\.sass$/,
    use:extractTextPlugin.extract({
        fallback: "style-loader",
        use: [
            {loader:"css-loader"},
            {loader:"sass-loader"}
        ]
    }) 
},

3.cnpm run build

打包并分离好的less和sass代码会出现在静态资源文件style.css中

常用命令行

内容	分类	命令	解释
安装webpack webpack-cli webpack-dev-server	全局安装	npm install -g webpack   //全局安装webpack npm install --save-dev webpack -g //全局安装webpack cnpm install --save-dev webpack-dev-server -g //全局安装webpack-dev-server	-g全局
	本地安装	npm install --save-dev webpack   //安装最新版本 npm install --save-dev webpack@<version>   //安装安装指定版本 npm install --save-dev webpack-cli  //支持webpack4	无指定，默认本地安装 js打包插件使用的前提
	直接从webpack仓库中安装	npm install webpack@beta //安装最新版本 npm install webpack/webpack#<tagname/branchname> //安装指定版本
安装插件	支持TypeScript	npm install --save-dev typescript ts-node @types/node @types/webpack	支持TypeScript书写配置文件
	安装lodash	npm install --save lodash
	安装uglifyjs	cnpm install uglifyjs-webpack-plugin --save-dev	压缩js代码
	压缩html	cnpm install --save-dev html-webpack-plugin	压缩thml打码
	分离代码	npm install --save-dev extract-text-webpack-plugin //3.0.2版本 npm install --save-dev extract-text-webpack-plugin@next  //4.0.0版本	分离代码（css，less，sass都会用到） webpack4要用4.0.0版本
安装loader	支持css和图片	npm install --save-dev style-loader css-loader //支持加载css npm install --save-dev file-loader //支持加载图片	压缩css
	压缩图片	cnpm install --save-dev file-loader url-loader cnpm install  --save-dev html-withimg-loader	压缩图片 url-loader内封装了file-loader，可以不装 html中图片处理，以及压缩后图片路径处理
	less	npm install --save-dev less  //安装less服务 npm install --save-dev less-loader //less-loader	less打包 安装less-loader前要安装less服务
	sass	npm install  node-sass --save-dev  npm install  sass-loader --save-dev	sass打包 sass-loader依赖于node-sass
打包	打包文件	webpack hello.js hello.bundle.js	可以以下参数 --module-bind 'css=style-loader!css-loader' //模块绑定 --watch //解析css模块(支持css)  --progress  //显示打包的进度  --modules   //显示打包的模块  --reasons   //需要打包某模块的原因
	打包项目	webpack	webpack4之前版本
		webpack --mode=development //开发环境 webpack --mode=production //生产环境	webpack4打包要指定打包环境

2.模块预处理

 

3.模块按需处理