webpack基本配置-笔记

本文属于学习笔记,如果发现错误,希望及时指正,谢谢~

webpack版本

  • webpack1.x
  • webpack2.x
  • webpack3.x
  • webpack4.x
  • 官网: https://webpack.js.org/
  • 补充其他
        静态开发(H5+C3) gulp
        vue\react  ->  webpack
        DEMO  -> webpack 转
    

webpack是什么?

  • 打包(bundle)工具(模块打包器)
  • 前端工程师,必不可少工具
  • webpack4.x

webpack作用:

  • 打包 (把多个文件打包成一个js文件, 减少服务器压力、带宽)
  • 转化 (比如less、sass、ts) 需要loader
  • 优化 (SPA越来越盛行,前端项目复杂度高, webpack可以对项目进行优化)

webpack构成:

  1. 入口 entry
  2. 出口 output
  3. loaders 转化器
  4. plugins 插件
  5. devServer 开发服务器
  6. mode 开发模式/生产模式
  7. 先必须确保node环境已经安装:nodejs.org -> download -> 下一步

安装webpack:

  • npm install webpack-cli -g
  • npm install [email protected] -g
    OR
  • yarn add webpack-cli -g
  • 验证webpack环境已经ok? webpack -v

卸载webpack:

`npm  uninstall  webpack  -g`

package.json 项目主要依赖配置文件

`npm init -y`

开发环境: (development)

    就是你平时编写代码的环境

    npm i jquery --save-dev
    npm i jquery -D

生产环境: (production)

    项目开发完毕,部署上线
     
    npm i jquery --save
    npm i jquery -S
  1. 例:
        npm i jquery
        npm un jquery
        npm i jquery --save-dev
        npm i jquery --save
        npm i jquery --save-dev jquery
    
  2. 安装多个 中间用空格分割:
    npm i jquery loadsh aaa bbb ccc -D
  3. npm如何配置:
    npm install -g npm --registry=https://registry.npm.taobao.org

跑一跑webpack:

  1. 创建webpack-demo文件夹
  2. webpack-demo下
    • 创建src,然后src下创建index.js(将被打包为bundle.js)
    • 创建dist,dist下创建index.html(html中引入bundle.js文件)
  3. 终端里运行:
    webpack src\index.js --output dist/bundle.js

webpack.config.js webpack配置文件

预览:
        module.exports={
            //入口配置
            entry:{},
            //出口配置
            output:{},
            //module.rules
            //loaders
            module:{},
            //插件
            plugins:[],
            //开发服务器
            devServer:{}
        };

例:


const path = require('path'); //node系统模块
module.exports={
    //入口配置
    entry:{
        a:'./src/index.js'
    },
    //出口配置
    output:{
            //path.resolve就是一个拼接路径的方法,__dirname指当前文件路径
        path:path.resolve(__dirname,'dist'), //path必须是绝对路径,指输出文件目录
            //filename输出文件名
        filename:'bundle.js'
    }
};

注意:

  1. 配置文件名字一定得叫 webpack.config.js 答: 不是
    • 如果改名叫: mmr.config.js,运行时候:
      1.
      终端运行
          webpack --config mmr.config.js
      2. 
      更改package.json中build为"webpack --config mmr.config.js",然后终端运行npm run build
      
      package.json:
              "scripts": {
                      "build": "webpack --config mmr.config.js",
                  "dev":"xxx",
                  "aaa":"xxx"
                }
      npm run build
      
  2. parcel 零配置,webpack4.x 实现所谓的0配置
  3. mode:
        webpack --mode development
            
        webpack --mode production 
            明显文件被压缩
    

多入口(多文件)打包一起:

    const path = require('path');
    module.exports = {
        entry:['./src/index.js','./src/index2.js'],  //按照顺一起打包 bundle.js
        output:{
            path:path.resolve(__dirname, 'dist'),
            filename:'bundle.js'
        }
    };

多入口多出口配置:

    const path = require('path');
    module.exports = {
        entry:{
            index:'./src/index.js',
            index2:'./src/index2.js'
        },
        output:{
            path:path.resolve(__dirname, 'dist'),
            //输出为两个文件,分别是index.bundle.js和index2.bundle.js,这就是[name]的作用,但是最后dist中index.html文件中引入文件名也要手动更改为index.bundle.js和index2.bundle.js
            filename:'[name].bundle.js'
        }
    };

html-webpack-plugin:

手册:https://www.npmjs.com/package/html-webpack-plugin#

安装注意

  1. 依赖webpack、webpack-cli
  2. 下载:npm i webpack webpack-cli -D
  3. 安装完之后直接就可以生成dist文件目录,也就是只要有src,package.json就能生成过dist文件夹并且包含js文件和html文件

生成页面

  1. 安装
        npm i html-webpack-plugin -D
  1. 引入
        const HtmlWebpackPlugin = require('html-webpack-plugin');
  1. 使用

            plugins:[
                new HtmlWebpackPlugin()
            ]
    

    例:

                const path = require('path');
                const HtmlWebpackPlugin = require('html-webpack-plugin');
                module.exports={
                    entry:
                    {
                        index:'./src/index.js',
                        index2:'./src/index2.js'
                    },
                    output:{
                        path:path.resolve(__dirname,'dist'),
                        filename:'[name].bundle.js'
                    },
                    plugins:[
                        new HtmlWebpackPlugin(),
                    ]
                }
    
    
  2. 模板:

                new HtmlWebpackPlugin({
                    template:'模板地址'
                })
    
  3. 页面标题:

                new HtmlWebpackPlugin({
                    //一定记得在模板中使用:也就是模板中是这样的<%= htmlWebpackPlugin.options.title%>
                    title:'xxxxx',
                    template:'模板地址'
                })
    
  4. 生成连接消除缓存

                new HtmlWebpackPlugin({
                    hash:true,
                    title:'xxxxx',
                    template:'模板地址'
                })
    
  5. 压缩输出:

                new HtmlWebpackPlugin({
                    minify:{
                        collapseWhitespace:true,  //压缩空白
                        removeAttributeQuotes:true //删除属性双引号
                    },
                    hash:true,
                    //一定记得在模板中使用:也就是src/index.html中是这样的:<title><%= htmlWebpackPlugin.options.title%>
                    title:'I Love China',
                    template:'./src/index.html'
                })
    
  6. 生成多个页面:

                filename:'xxx'
    
  7. 多页面分别引入自己的js:

                chunks:['index']
    

    例:

      plugins:[
              new HtmlWebpackPlugin({
                  chunks:['index'],
                  filename:'index4.html',
                  title:'ifhdksah',
                  template:'./src/index.html',
              }),
              new HtmlWebpackPlugin({
                  chunks:['index2'],
                  filename:'index3.html',
                  title:'ifhdksah',
                  template:'./src/index.html',
              }),
          ]
    
    

10 https://www.npmjs.com/package/html-webpack-plugin

以上使用综合例:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports={
    /*入口配置*/
    entry:{
        /*a:名字随意起*/
        index: './src/index.js',
        index2: './src/index2.js'
    },
    /*出口配置*/
    output:{
        /*path整体打包路径,必须是绝对路径,
        __dirname代表当前webpack.config.js所在目录,是绝对路径*/
        path:path.resolve(__dirname , 'dist'),
        /*filename名字固定,可以生成两个js文件,这个name是入口文件entry的key值*/
        filename:'[name].bundle.js'
    },
    /*能自动生成dist目录(index.bundle.js,index2.bundle.js等)*/
    plugins:[
        
        new HtmlWebpackPlugin({ 
            /*压缩输出*/
            // minify:{
            //  collapseWhitespace:true/*折叠空白区域*/

            // },
            /*生成链接消除缓存,每个生成的文件名都不一样,类似于这样:"index.bundle.js?3e368073ad67e336b700"*/
            // hash:'true',
            /*引入js文件*/
            chunks:['index'],
            /*生成html文件的名字*/
            filename:'index.html',
            /*可以编辑生成的index文件的标题*/
            title:'i an',
            /*模板地址*/
            template:'./src/index.html'
        }),
        new HtmlWebpackPlugin({
            // 引入js文件
            chunks:['index2'],
            /*生成html页面的名字*/
            filename:' index2.html',
            /*可以编辑生成的index文件的标题*/
            title:'第二个页面',
            /*模板地址*/
            template:'./src/index2.html'
        })
    ]
};
结果:可以在生成dist目录,目录中有两个js文件和两个html文件,一个为index.html和index2.html文件,分别引用js文件

clean-webpack-plugin: 删除某些东西(清除)

1. 下载
    npm i clean-webpack-plugin -D
2. 引入
    const CleanWebpackPlugin = require('clean-webpack-plugin');
3. 使用:
    new CleanWebpackPlugin(['dist'])

devServer:

  1. 下载(如果出错可以一直下载,就是建议把node_modules也删了重新下载)
    npm i webpack-dev-server -D

  2. 使用

      devServer:{
              //设置服务器访问的基本目录
              contentBase:path.resolve(__dirname, 'dist'),
              //服务器ip地址, localhost
              host:'localhost',
              //设置端口
              port:8090
          }
    
    
  3. 此时

    package.json:
        "scripts": {
            "build": "webpack --mode development",
            "dev":"webpack-dev-server --mode development"
        }
    注意这个package
    
  4. 想自动打开浏览器:
    open:true

  5. 热更新: hot:true

     //放在文件头部,引入插件
     const webpack = require('webpack');
     //开启
     hot:true
     //在plugins中配置
     new webpack.HotModuleReplacementPlugin()
    
  6. 官方文档:https://webpack.js.org/configuration/dev-server/

以上综合例:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports={
    /*入口配置*/
    entry:{
        /*a:名字随意起*/
        index: './src/index.js',
        index2: './src/index2.js'
    },
    /*出口配置*/
    output:{
        /*path整体打包路径,必须是绝对路径,
        __dirname代表当前webpack.config.js所在目录,是绝对路径*/
        path:path.resolve(__dirname , 'dist'),
        /*filename名字固定,可以生成两个js文件,这个name是入口文件entry的key值*/
        filename:'[name].bundle.js'
    },
    devServer:{
        /*设置服务器访问的基本目录*/
        contentBase:path.resolve(__dirname , 'dist'),
        host:'localhost',
        port:8090,
        open:true,/*自动打开页面*/
        hot:true
    },
    /*能自动生成dist目录(index.bundle.js,index2.bundle.js等)*/
    plugins:[
        /*清除dist文件夹*/
        /*new CleanWebpackPlugin(['dist']),*/
        /*配置热更新,先const引入webpack,然后在plugins中配置一下,然后在dexServer中将hot打开
        */
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            // 引入js文件
            chunks:['index'],
            /*生成html页面的名字*/
            filename:' index.html',
            /*可以编辑生成的index文件的标题*/
            title:'china',
            /*模板地址*/
            template:'./src/index.html'
        })
    ]
};
结果:
1.npm run bulid:可以在生成dist目录,目录中有一个html文件,两个js文件,并且html文件引用两个js文件
2.npm run dev:浏览器自动打开dist中生成index.html文件,并且开启热更新(这个热更新暂时没什么实质性的表示)

loaders: 在webpack里面是一个很重要功能

    加载器、转化器
    比如: less/scss 转成css
            ES7 8
            jsx

处理css文件:

  1. 在引入css文件时注意:
    • index.js引入src下的css文件夹中a.css文件
      index.js:
          import './css/a.css'
      
    • 不在文件头部引入(图片引入同理):也就是没有什么const … = require(…)这样的语句
      
          插件:
              style-loader
              css-loader
          安装:npm i style-loader css-loader -D
          配置:
              module:{
                  rules:[
                      {
                          //test匹配规则,以.css后缀名结尾的文件
                          test:/\.css$/,
                          use:['style-loader','css-loader']
                      }
                  ]
              }
      
  2. 注意:关于loader写法
    1. use:['xxx-loader','xxx-loader']
    2. loader:['xxx-loader','xxx-loader']
    3. use:[
                    {loader:'style-loader'},
                    {loader:'css-loader'}
                ]
    

打包完以后肯定需要压缩上线:

  1. 如何压缩:
    • webpack4.x:–mode production
      由package.json:
          "scripts": {
              "build": "webpack --mode development",
              "dev":"webpack-dev-server --mode development"
          }
      变为package.json:
      "scripts": {
          "build": "webpack --mode production",
          "dev":"webpack-dev-server --mode production"
      }
      
    • 之前版本
      uglifyjs-webpack-plugin
      1. 下载插件:npm i uglifyjs-webpack-plugin -D
      2. 文件头部引入:const uglify = require('xxx);
      3. 在plugin中配置:new ugliufy()
      

图片: (png,jpg,gif)

  1. 插件:url-loader file-loader
  2. 安装:npm i file-loader url-loader -D
  3. 配置:
        {
            test:/\.(png|jpg|gif)$/,
            use:[{
                loader:'url-loader',
                options:{
                      limit:50,
                      outputPath:'images'
                }
            }]
        }
    
  4. 注意:此时文件
    index.js文件中内容为:
        import './css/a.css';
        import imgSrc from './images/大白.jpg';
        let o = new Image();
        o.onload = function(){
        document.appendChild(o);
        }
        o.src= imgSrc;
    a.css文件中内容为:
        body{
            background:url('../images/大白.jpg') right top repeat-y;
        }
    webpack.config.js文件中module内容为:
        module:{
            rules:[
                {
                    //test匹配规则,以.css后缀名结尾的文件
                    test:/\.css$/,
                    use:['style-loader','css-loader'],
                },
                {
                    test:/\.(png|jpg|gif)$/,
                    use:[{
                        loader:'url-loader',
                        options:{
                              limit:50,
                              outputPath:'images'//所有图片打包在一个images的文件夹
                        }
                    }]
                }
               ]
        },
    

分离: css

  1. 插件:extract-text-webpack-plugin
  2. 安装:
    npm i extract-text-webpack-plugin -D        webpack3.x
    npm i extract-text-webpack-plugin@next -D  webpack4.x
    
  3. 应用:
    • 文件头部:
      const ExtractTextPlugin = require('extract-text-webpack-plugin');
    • 然后在plugins里面设置:
      //new ExtractTextPlugin(文件打包路径)
      new ExtractTextPlugin('css/index.css')
      
    • 然后再在module中应用:
      //所有css文件打包在一个css文件夹
      use:ExtractTextPlugin.extract({
          fallback:'style-loader',
          use:'css-loader',
          publicPath:'../' //解决css背景图,路径问题
      })
      

mini-css-extract-plugin:

    截止到目前为止(2018-3-23),对背景图路径配置
    API文档
    下载:npm i mini-css-extract-plugin -D
    引入:在文件的最开头引入
    使用:pulgins中配置如下
    new MiniCssExtractPlugin({
        filename:'css/index.css'
    })
    在module中css部分配置如下:
    use[
       MiniCssEctractPlugin.loader,'css-loader'
    ]

综合知识点例:loaders ,css,图片,分离css, mini-css-extract-plugin

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
/*const MiniCssExtractPlugin = require('mini-css-extract-plugin');*/
module.exports={
    entry:{
        index: './src/index.js',
    },
    output:{
        path:path.resolve(__dirname , 'dist'),
        filename:'[name].bundle.js'
    },
    /*如果想使用css文件的话,配置module模块,并且这里面都是固定配置,名字不能改变*/
    module:{
        rules:[
            {
                /*加载css,将css文件提取*/
                test:/\.css$/,
                use:['style-loader' , 'css-loader'],
                /*上面的语句等价于:
                loader:['style-loader' , 'css-loader']
                    也等价于:
                use:[
                //必须先写style-loader然后写css-loader
                    {loader:'style-loader'},
                    {loader:'css-loader'}
                ]*/
                use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:'css-loader',
                    // 配css里面背景图的路径
                    publicPath:'../'
                })
                /*use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]*/
            },
            {
                /*将图片打包,并且放在images文件夹中*/
                test:/\.(png|jpg|gif)$/,
                use:{
                    loader:'url-loader',
                    /*当图片大小超过limit值时,图片就转为路径形式,而不是base64,base64特点与路径无关,*/
                    options:{
                        limit : 50,
                        outputPath:'images'
                    }
                }
            }
        ] 
    },
    /*如果在package.json中写的是mode production的话,就是压缩模式,就是将文件打包压缩*/
    devServer:{
        contentBase:path.resolve(__dirname , 'dist'),
        host:'localhost',
        port:8090,
        open:true,
        hot:true
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            title:'china',
            template:'./src/index.html'
        }),
        new ExtractTextPlugin('css/index.css'),
        /*new MiniCssExtractPlugin({
            filename:'css/index.css',
        })*/
    ]
};

less(参见css,和css一样的):

  1. npm i less less-loader -D
  2. 在index.js中import引入a.less文件
  3. module下rules
    {
        test:/\.less$/,
        use:['style-loader','css-loader','less-loader']
    }
    less文件夹下a.less文件:
    
        @a:red;
        #less-id{
        color: @a;
        ul{
            li{
                list-style:none;
                height:30px;
                line-height:30px;
            }
         }
        }
    index.html:
    
        
    index.js: import './less/a.less'; webpack.config.js module下rules { test:/\.less$/, use:['style-loader','css-loader','less-loader'] }

分离less:(把less也扔到index.css中)

  1. module下rules:
    {
        test:/\.less$/,
        //use:['style-loader','css-loader','less-loader']
        use:ExtractTextPlugin.extract({
            fallback:'style-loader',
            use:['css-loader','less-loader']
        })
    }
    除了:module下rules外,其他文件内容都和那个less一样
    

sass:(同less一样一样的)

  1. 安装插件:
    npm i node-sass sass-loader -D
  2. 配置:
    {
        test:/\.(sass|scss)$/,
        use:['style-loader','css-loader','sass-loader']
    }
    

提取sass:

```
{
    test:/\.(sass|scss)$/,
    use:ExtractTextPlugin.extract({
        fallback:'style-loader',
        use:['css-loader','sass-loader']
    })
}
```
  1. transform:-webkit-transform:

自动处理前缀:

  1. 安装插件:npm i postcss-loader autoprefixer -D

  2. 准备 postcss.config.js文件 配置postCss

    module.exports ={
        plugins:[
            require('autoprefixer')
        ]
    };
    
  3. 配置loader

    module下rules:
    {
        use:[
                {loader:'style-loader'},
                {loader:'css-loader'},
                {loader:'postcss-loader'}
            ]
    }
    
  4. 提取出来

    module下rules:
    {
        use:ExtractTextPlugin.extract({
            fallback:'style-loader',
            use:['css-loader','postcss-loader'],
            publicPath:'../' //解决css背景图,路径问题
        })
    }
    
  5. postCss 预处理器 , 专门处理css平台

消除冗余css代码:Purifycss

  1. 下载:npm i purifycss-webpack purify-css -D
  2. 引入插件
    const PurifyCssWebpack = rewquire('purifycss-webpack');
  3. 需要引入一个额外包glob
    • 下载:npm i glob -D
    • 引入:const glob = require('glob');
  4. 在plugins里面配置
    new PurifyCssWebpack({
        //*.html匹配所有html文件,将用到的css保留,不用的清除(例如:没有用到的样式,选择器什么的),
        paths:glob.sync(path.join(__dirname, 'src/*.html'))
    })
    

调试:

  1. webpack4.x 开启调试:--mode development
  2. webpack3.x之前:
    sourceMap
     //这个devtool是放在与plugins或者module平级的位置上,也就是:
    module:{...},
    devtool:'source-map',
    plugins:{...}
    

babel:

  1. webpack已经实现了支持esnext所有语法
        - babel用来编译js
        - 让你很轻松的使用 ESnext,转化
        - jsx
    
  2. 如果碰到不支持的
        1.那就先下载插件,然后在module中的rules中配置如下选项(这里配置的只是一个预设,得把它装在.babelrc文件中才能成功)
        2.然后再新建一个.babelrc文件,具体配置如下:
    
            1.插件:babel-core  bable-loader   babel-preset-env
            2.插件下载:
                npm i babel-loader babel-core babel-preset-env -D
            3.配置:module下rules:
                    {
                        test:/\.(js|jsx)$/,
                        use:['babel-loader'],
                         //检索的位置不包含node_modules
                        exclude:/node_modules/
                    }
            4. .babelrc文件配置:放在src同级目录
                {
                  "presets":{
                      "env"
                    }
                }
                ESnext所有语法
    
    
  3. 创建js文件夹,再创建a.js文件
    a.js文件中内容为:
        export const a = 12,
        export const a = 5
    index.js文件中内容为:
        import {a, b} from './js/a.js';
    module下rules:
        {
            test:/\.(js|jsx)$/,
            use:['babel-loader'],
             //检索的位置不包含node_modules
            exclude:/node_modules/
        }
    

如果是jsx文件

    jsx:
    npm i babel-preset-react -D
    npm i react react-dom -D
    就是需要配置react等等插件

在webpack中用模块化:和node一模一样

  1. 导出:(新建文件存储模块,例如webpack.rules.js,然后最后把存储数据的变量利用下面一行语句导出)
    module.exports = xxx

  2. 引入:(在webpack.config.js文件头用下面语句导入,记得一定要加./ 代表本地文件)
    require('./xxxxx');

  3. 完整例子:

    webpacl.rules.js文件中内容为:
            //注意插件引入
        const ExtractTextPlugin = require('extract-text-webpack-plugin');
        const rules = {
            rules:[
                    {w
                        /*加载css,将css文件提取*/
                        test:/\.css$/,
                        /*use:['style-loader' , 'css-loader'],*/
                        /*上面的语句等价于:
                        loader:['style-loader' , 'css-loader']
                            也等价于:
                        */
                        /*use:[
                        //必须先写style-loader然后写css-loader
                            {loader:'style-loader'},
                            {loader:'css-loader'},
                            {loader:'postcss-loader'}
                        ]*/
    
                        /*提取分离css*/
                        use:ExtractTextPlugin.extract({
                            fallback:'style-loader',
                            use:['css-loader','postcss-loader'],
                            // 配css里面背景图的路径
                            publicPath:'../'
                        })
                        /*use:[
                            MiniCssExtractPlugin.loader,
                            'css-loader'
                        ]*/
                    },
                    /*配置bebel,为了支持esnext语法,不过webpack现在已经都支持了,但是要知道是这么配的*/
                    /*{
                        test:/\.(js|jsx)$/,
                        use:['babel-loader'],
                        exclude:/node_modules/
                    },*/
                    {
                        /*将图片打包,并且放在images文件夹中*/
                        test:/\.(png|jpg|gif)$/,
                        use:{
                            loader:'url-loader',
                            /*当图片大小超过limit值时,图片就转为路径形式,而不是base64,base64特点与路径无关,*/
                            options:{
                                limit : 50,
                                outputPath:'images'
                            }
                        }
                    },
                    {
                        test:/\.less/,
                        /*顺序:先是less-loader修饰,然后css-loader加载,然后再扔到style-loader,也就是use里面的顺序是从右往左的*/
                        /*use:['style-loader' , 'css-loader' , 'less-loader']*/
                        use:ExtractTextPlugin.extract({
                            fallback:'style-loader',
                            use:['css-loader' , 'less-loader']
                        })
                    }/*,
                    {
                        test:/\.sass$/;
                        use:['style-loader','css-loader' ,'sass-loader']
                    }*/
                ] 
        };
        module.exports = rules;
    webpack.config.js文件中内容为:
            //1.引入文件
        const rulesConfig = require('./webpack.rules.js');
            //使用
        entry:{...},
        module:rulesConfig,
        plugins:[...],
    

在webpack中使用json:

  1. 之前插件:json-loader
  2. 但是到webpack.3x版本之后不用,json可以默认就识别
    1. 先创建json文件,
      webpack.config.json文件内容为:
          {
              "entry":"./src/index.js"
          }
      
    2. 在webpack.config.js文件头部导入利用如下语句
      记住,不可用import,webpack不支持,但是在src下的index.js也就是入口文件这里可以用,因为这个index.js文件可以利用webpack.config.js文件中的babel模块包装,
      
    3. 所需文件:
      (1)webpack.config.js文件内容为:
              //头部引入文件:
          const jsonConfig = require('./webpack.config.json');
              //使用:
          module.exports={
              {...},
              entry:{
                  index: jsonConfig.entry,
                  jquery:'jquery'
              },
              {...}
          }
      (2)webpack.config.json文件内容为:
          {
              "entry":"./src/index.js"
          }
      

静态资源输出: copy-webpack-plugin

  1. 下载
    npm i copy-webpack-plugin -D
  2. 引入
    const CopyWebpackPlugin = require('copy-webpack-plugin');
  3. 使用
    plugins:[
        new CopyWebpackPlugin([{
            from:path.resolve(__dirname, 'src/assets'),
            to:'./public'
        }])
    ]
    

补充:

  1. 官网->插件什么的:https://webpack.js.org/plugins/copy-webpack-plugin/都在npm上:
    www.npmjs.com
    github  issues
    

使用第三库:

  1. 直接npm下载,然后在index.js也就是入口文件处引入(完全可以使用,但是我个人不是很推荐)
    (1)安装:npm i jquery -S
    (2) src下的index.js 文件处使用:
            import $ from 'jquery';
            $('#box').css({
             width:'100px',
             height:'100px',
             background-color:'red'
            })
        src下的index.html文件内使用:
  2. ProvidePlugin (个人推荐此方式)
    这个插件是webpack自带的插件,不需要下载,只需要保证webpack在就行
    使用:
        //引入插件
    const webpack = require('webpack');
        //在plugins里面使用:
    new webpack.ProvidePlugin({
        $:'jquery',
        lodash:'lodash'
        ....
    })
    
  3. 通过ProvidePlugin和 import直接引入区别:
    (1). import $...,引入之后,无论你在代码中是否使用jquery,打包后,都会打进去,这样其实产生大量的冗余js
    (2). Provideplugin, 只有你在使用到此库,才会打包
    

提取第三方(自己感觉想提取)js库:

  1. 之前webpack3.x版本之前:
    在plugins里面配置:
    new webpack.optimize.CommonsChunkPlugin({
        name:'jquery'
    })
    
  2. 到了webpack4.x版本:
    用到:optimization.splitChunks
    webpack.config.js文件中配置:
        module.exports = {
            entry:{
                index: jsonConfig.entry,
                jquery:'jquery'
            },
            optimization:{
                splitChunks:{
                    cacheGroups:{
                        vendor:{
                            chunks:'initial',
                            name:'jquery',
                            enforce:true
                        }
                    }
                }
            },
            plugins:[...],
            ...
        }
        optimization:{
            splitChunks:{
                cacheGroups:{
                    aaa:{
                        chunks:'initial',
                        name:'jquery',//和入口entry中key名一样,最后生成jquery.bundle.js文件
                        enforce:true
                    },
                    /*如果再要生成一个文件,就entry入口key值和这个name值要对应*/
                    bbb:{
                        chunks:'initial',
                        name:'入口名称',
                        enforce:true
                    }
                }
            }
    

webpack-demo文件夹中(具体查看webpack-demo文件夹)

  1. webpack.config.js文件:
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const webpack = require('webpack');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const PurifyCssWebpack = require('purifycss-webpack');
    const glob = require('glob');
    /*./为了区分用npm下载的模块和本地下载的模块*/
    const rulesConfig = require('./webpack.rules.js');
    const jsonConfig = require('./webpack.config.json');
    /*const MiniCssExtractPlugin = require('mini-css-extract-plugin');*/
    
    const CopyWebpackPlugin = require('copy-webpack-plugin');
    module.exports={
        entry:{
            index: jsonConfig.entry,
            jquery:'jquery'
        },
        output:{
            path:path.resolve(__dirname , 'dist'),
            filename:'[name].bundle.js'
        },
        /*如果想使用css文件的话,配置module模块,并且这里面都是固定配置,名字不能改变*/
        /*创建单独的文件webpack.rules.js,存储rules文件,然后导出到这里就行了*/
        module:rulesConfig,
        /*如果在package.json中写的是mode production的话,就是压缩模式,就是将文件打包压缩*/
        devServer:{
            contentBase:path.resolve(__dirname , 'dist'),
            host:'localhost',
            port:8090,
            open:true,
            hot:true
        },
        plugins:[
            new webpack.HotModuleReplacementPlugin(),
            new HtmlWebpackPlugin({
                title:'china',
                template:'./src/index.html'
            }),
            new ExtractTextPlugin('css/index.css'),
            /*new MiniCssExtractPlugin({
                filename:'css/index.css',
            })*/
            new PurifyCssWebpack({
                /*sync同步的方法
                join用来合并路径的,其实和resolve没啥区别
                */
                /*作用:根据路径找模版,根据模版找哪些引用css,哪些没引用css,然后把没被引用的css的给删了*/
                paths:glob.sync(path.join(__dirname , 'src/*.html'))
            }),
            /*静态资源输出*/
            new CopyWebpackPlugin([{
                from:path.resolve(__dirname,'src/assets'),
                to:'./public'
            }]),
            new webpack.ProvidePlugin({
                $:'jquery'
            })
        ],
        optimization:{
            splitChunks:{
                    cacheGroups:{
                        ventor:{
                            chunks:'initial',
                            name:'jquery',
                            enforce:true
                    }
                }
            }
        }
    }
    
  2. webpack.rules.js文件:
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const rules = {
        rules:[
                {
                    /*加载css,将css文件提取*/
                    test:/\.css$/,
                    /*use:['style-loader' , 'css-loader'],*/
                    /*上面的语句等价于:
                    loader:['style-loader' , 'css-loader']
                        也等价于:
                    */
                    /*use:[
                    //必须先写style-loader然后写css-loader
                        {loader:'style-loader'},
                        {loader:'css-loader'},
                        {loader:'postcss-loader'}
                    ]*/
    
                    /*提取分离css*/
                    use:ExtractTextPlugin.extract({
                        fallback:'style-loader',
                        use:['css-loader','postcss-loader'],
                        // 配css里面背景图的路径
                        publicPath:'../'
                    })
                    /*use:[
                        MiniCssExtractPlugin.loader,
                        'css-loader'
                    ]*/
                },
                /*配置bebel,为了支持esnext语法,不过webpack现在已经都支持了,但是要知道是这么配的*/
                /*{
                    test:/\.(js|jsx)$/,
                    use:['babel-loader'],
                    exclude:/node_modules/
                },*/
                {
                    /*将图片打包,并且放在images文件夹中*/
                    test:/\.(png|jpg|gif)$/,
                    use:{
                        loader:'url-loader',
                        /*当图片大小超过limit值时,图片就转为路径形式,而不是base64,base64特点与路径无关,*/
                        options:{
                            limit : 50,
                            outputPath:'images'
                        }
                    }
                },
                {
                    test:/\.less/,
                    /*顺序:先是less-loader修饰,然后css-loader加载,然后再扔到style-loader,也就是use里面的顺序是从右往左的*/
                    /*use:['style-loader' , 'css-loader' , 'less-loader']*/
                    use:ExtractTextPlugin.extract({
                        fallback:'style-loader',
                        use:['css-loader' , 'less-loader']
                    })
                }/*,
                {
                    test:/\.sass$/,
                    use:['style-loader','css-loader' ,'sass-loader']
                }*/
            ] 
    };
    module.exports = rules;
    

补充:

npm ...... -D  安装在当前文件夹中的node_modules文件夹中
npm ...... -S  安装在c盘下用户下83612下的node_modules

vue插件

1.安装:npm i vue -D
2.使用:

  • 第一种方式:
     (1)main.js(index.js)文件夹中:
        import Vue from '../node_modules/vue/dist/vue.js'    
        var vm = new Vue({
            el: '#app',
            data: {
            msg: '123'
            }
        }),
     (2)index.html文件夹中:
        
    {{msg}}
  • 第二种方式:
     (1)main.js(index.js)文件中配置:
        import Vue from 'vue';
     (2)webpack.config.js中配置:
        module.exports = {
            entry:{...},
            plugins:[...],
            resolve: {
                alias: { // 修改 Vue 被导入时候的包的路径
                  // "vue$": "vue/dist/vue.js"
                }
            }
        }
    

vue组件插件

  1. 安装插件:npm i vue-loader vue-template-compiler -D
  2. 使用:
    • 第一种方式: index.js中配置更改默认加载文件为vue.js不是那个什么runtime什么.js那个文件
      import Vue from '../node_modules/vue/dist/vue.js' 
      var login = {
         template: '

      这是login组件,是使用网页中形式创建出来的组件

      ' } var vm = new Vue({ el: '#app', data: { msg: '123' }, components: { login } render: c => c(login) })
    • 第二种方式:
      1.webpack.config.js文件
          //(1)头部引入:
              const VueLoaderPlugin = require('vue-loader/lib/plugin');
              entry:{...},
          //(2)module下rules配置loader
              module:{
                  rules:[
                  { test: /\.vue$/, use: 'vue-loader' },
                  ]
              },
          //(3)plugins中配置
              plugins:[
                  new VueLoaderPlugin(),
              ],
      2.src下创建login.vue文件:
          
      3.入口文件index.js文件:
          import Vue from '../node_modules/vue/dist/vue.js'   
          import login from './login.vue'
          var vm = new Vue({
              el: "#app",
              data:{
                  msg : 'a',
              },
              
              render:c=>c(login),
          })
      

你可能感兴趣的:(webpack基本配置-笔记)