webpack简记

前端模块化：提高代码复用性，多人协作开发项目，更让资源更合理的进行缓存

Webpack中所有资源都是模块，模块需要通过AMD或者CMD规范加载；

使用npm命令需要先安装好node环境

1.安装 webpack

npm install webpack -g

npm install webpack-cli -g(4以上版本需要单独安装cli)

webpack -v 查看版本号

 2.进入项目文件夹

cd 把文件夹拖过来  (此后的指令都是针对此文件夹)

 3.初始化项目

npm init （默认回车..）生成一个json文件

4.使用 

tool.js是入口文件entry.js的一个依赖 

如  tool.js:

    //模块化写法
    module.exports = {
        hello:function(str){
            console.log(str);
        }
    }

  在entry.js中引入tool.js

    var tool = require('./tool.js');
    tool.hello('123');就可以使用了

5.创建配置文件 

名为webpack.config.js；进行配置，规则说明

//输出模块
module.exports = {
    entry:   './src/js/entry.js',//入口文件是谁
    output:{    //输出的文件设置
        filename:'[name].js',文件名如index.js。用到hash值来加速更新{filename:'index-[hash:8].js/index-[chunkhash:8].js'}
        path:__dirname + '/out',//打包文件的路径（__dirname进入绝对路径即当前路径）
        publicPath:'./out'//指定文件的公共路径
    },
}

 

注释：用hash：cdn缓存服务器更新很慢，文件名相同时，cdn识别不出异样还是缓慢的更新，在out的文件命中加入hash值，

每次文件内容变动哈希值就会改变，文件名就改变了；次是上传到CDN缓存服务器上时，服务器会把新的文件更新上；

hash是有文件改变，所有文件hash值都改变，chunkhash是只是有变化的文件的hash值改变

6.引入打包好的js文件

 <script src='./out/index.js'></script>

7.打包

webpack

webpack -w    监听且打包

加载器

8.webpack-loader：解析浏览器不支持的模块

 下载：

 下载babel-loader,babel-core, babel ; // npm install ***
     css-loader style-loader; （我使用的是css-loader@1.0.0）
     file-loader  //独立打包文件图片需要

下载loader时最好后面加上 --save -dev 

在配置文件中进行配置  

    module:{
        rules:[
            {test: /.js$/, use:['babel-loader']},//以.js结尾的文件用babel-loader加载器进行解析
            {test: /.css$/, use:['style-loader','css-loader']},//css文件用css-loader进行解析计算，用style-loader进行加载
            {test: /.jpg|png|gif|svg$/,use:['url-loader]}//解析图片
        ]
    }

9.在entry.js中引入图片 

 var  img = new Image();
    img.src = require('../img/a.jpg');
    document.body.appendChild(img);

 解析图片是把图片解析成base64编码格式，大图片转为base64编码格式内容太多，应该独立打包出来：

{test: /.jpg|png|gif|svg$/,use:['url-loader?limit=8192&name=./[name][ext]']}//解析图片，原来的名字原来的类型

 10.打包多个文件

 entry:{    对象的形式
        index:'./src/js/entry.js',（名-值）
        index2:'./src/js/entry2.js'
    },
    output:{    //输出的文件设置
        filename:'[name].js',文件名用原来的名字。用到hash值来加速更新{filename:'index-[hash:8].js/index-[chunkhash:8].js'}
        ......
        ....
    },

 注释：

多个文件体现了chunkhash的作用，只有内容改变的那个模块的hash值会改变，这样CDN就只会更新这一个模块

使用hash时，一个内容改变，所有模块的hash值都会改变，CDN就会对所有文件都进行更新。

插件

 需要下载 npm install webpack -g//下载之前同版本的webpack

 11.代码压缩

 

1.下载插件      
             npm install uglifyjs-webpack-plugin
2.配置（配置文件中）：用require引入：
            var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
            plugins:[//插件
                 new UglifyJSPlugin();
             ]

webpack打包后的输出文件就是压缩过的

12.打包公共模块

配置：引入webpack： var webpack = require('webpack');

配置插件

webpack4以上版本在entry同级别下添加:
  optimization: {
        splitChunks: {
            minSize:0,
            cacheGroups: {
                commons: {
                    name:'commons',
                    chunks:'initial',
                    minChunks:2,
                    
                }
            }
        }
    },

此时需要在html中需要<script src='commons.js'></script>引入公共模块

 13 CSS独立打包

 

 下载插件：npm install extract-text-webpack-plugin --save-dev

配置

       以require方式引入插件：var ExtractTextPlugin =require('extract-text-webpack-plugin');
       loader的配置：plugins中：new ExtractTextPlugin('[name].css'),//独立打包css
            rule中css的解析方式需要改变了：
               {
                      test:/.css$/,
                      use:ExtractTextPlugin.extract({//独立打包
                          fallback:"style-loader",
                          use:"css-loader"
                      })
                },
 

进行打包  引入link打包出来的css文件  

14 独立打包文件时 静态资源路径不统一问题

 

把资源换到服务器上（由webpack提供）：

就是说之前out文件夹下面的输出文件都输出到了服务器上，out文件夹不再需要了；

   1.下载webpack服务器 npm install webpack-dev-server -g
   2.output中    publicPath:'http://localhost:8080/out'

此服务器下会默认访问index.html文件，需要把文件名改变

  服务器下打包：webpack-dev-server
                webpack-dev-server --progress --colors --watch

15 使用jquery 

 npm install jquery 
    引入jquery： var providePlugin = new webpack.ProvidePlugin({$:'jquery',jQuery:'jquery','window.jQuery':'jquery'});

16 工具

    webpack-dev-server devtool eval-source-map//文件压缩是能定位出错位置

17 简化命令 

        在初始化的.json文件中script下面加"name":"原命令"
        此后可以使用npm run name 执行原命令