webpack 基本配置和使用

webpack 安装

• 安装本地的 webpack

• webpack webpack-cli -D

webpack可以进行)配置

手动配置webpack

• webpack.config.js 默认使用 这个配置文件

• npx webpack --config webpack.config.my.js 使用自己的 文件

  "script":{

  "build":"npx webpack --config webpack.config.my.js"
  

  }

命令太长 可以在package.json 中加入 上面命令

开发服务器配置

-cnpm install webpack-dev-server

webpack.config.js

    devServer: {

        port: 3000, // 端口

        progress: true,//进度条

        contentBase: './build', // 静态服务目录

        compress:true,//启动压缩

    },

自动打包 html

-cnpm install html-webpack-plugin

webpack.config.js

    let HtmlWebpackPlugin = require('html-webpack-plugin')

    plugins:[//数组放着所有的 webpack 插件

        new HtmlWebpackPlugin({

            template:'./src/index.html', //模板位置

            filename:'index.html',//打包文件目录

            minify:{

                collapseInlineTagWhitespace:true,//代码一行显示

                removeAttributeQuotes:true,//去除双引号





            },

            hash:true,//加上hash串

        })

    ]

css 处理器

cnpm install css-loader style-loader sass-loader node-sass less-loader -D

//css-loader 负责解析@import这种语法的

//style-loader 他是把css插入到head的标签中

// loader 的特点 希望单一

// loader的用法 字符串只用一个loader

// 多个loader 需要 []

// loader 的顺序,默认是从右向左执行

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

// 可以处理less文件

webpack.config.js

    {

        test: /\.css$/, use: [

            {

                loader: 'style-loader'

            },

            'css-loader',

            'less-loader'

        ]

    }

######## css 抽离文件
cnpm install mini-css-extract-pllugin -D css 抽离文件

let MiniCssExtractPlugin = require('mini-css-extract-plugin')

let MiniCssExtractPlugin1 = require('mini-css-extract-plugin')

let MiniCssExtractPlugin2 = require('mini-css-extract-plugin')

如果需要打包多个css 文件 那么创建多个

webpack.config.js

    plugins: [//数组放着所有的 webpack 插件

        new MiniCssExtractPlugin({

            filename:'index.css'

        }),

        new MiniCssExtractPlugin1({

            filename:'index1.css'

        })

    ]

    {

        test: /\.scss$/,

        use: [

            MiniCssExtractPlugin.loader, 需要抽离的文件就加上MiniCssExtractPlugin.loader 去掉 style-loader

            'css-loader',

            'sass-loader'

        ]

    }

######## css 自动添加前缀
cnpm install postcss-loader autoprefixer

autoprefixer 插件需要 postcss-loader 处理

postcss-loader 需要房子最后

webpack.config.js

    {

        test: /\.scss$/,

        use: [

            MiniCssExtractPlugin.loader,

            'css-loader',

            'sass-loader',

            'postcss-loader',

        ]

    }

需要创建一个 postcss.config.js 在根目录下

    module.exports = {

        plugins: {

            'autoprefixer': { browsers: 'last 5 version' }

        } 

    }

需要在package.json 加上 browserslist 属性 如果 不配置 package.json 那么就需要创建 .browserslistrc文件

package.json

    "browserslist": [

        "defaults",

        "not ie < 11",

        "last 2 versions",

        "> 1%",

        "iOS 7",

        "last 3 iOS versions"

    ]

.browserslistrc

    # Browsers that we support

    last 1 version

    > 1%

    maintained node versions

    not dead

optimize-css-assets-webpack-plugin 压缩css

cnpm install optimize-css-assets-webpack-plugin -D

webpack.config.js

    压缩在 mode: 'production' 生效 需配置

    let OptimizeCss = require('optimize-css-assets-webpack-plugin')

    optimization:{

        minimizer:[

            new OptimizeCss()

        ]

    }

    只这样配置后 js 不在 压缩 css 压缩

    就需要 安装 uglifyjs-webpack-plugin

    cnpm install uglifyjs-webpack-plugin -D 这个插件

    let UglifyjsPlugin = require('uglifyjs-webpack-plugin')

    optimization:{

    minimizer:[

        new OptimizeCss(),

        new UglifyjsPlugin({

            cache:true, //缓存

            parallel:true, //并发

            sourceMap:true

        })

    ]

},

es6转es5

cnpm install babel-loader @babel/core @babel/preset-env -D

webpack.config.js

{

    test:/\.js$/,

    use:{

        loader:'babel-loader',

        options:{

            presets:[ // 用babel-loader 需要把 es6 -> es5

                '@babel/preset-env'

            ],



        }

    }

}

使用 class

因为class 属于 es7 需要单独安装插件

cnpm install @babel/plugin-proposal-class-properties -D

webpack.config.js

{

    test:/\.js$/,

    use:{

        loader:'babel-loader',

        options:{

            presets:[ // 用babel-loader 需要把 es6 -> es5

                '@babel/preset-env'

            ],

            plugins:[

                '@babel/plugin-proposal-class-properties'

            ]

        }

    }

}

js处理语法及校验

cnpm install --save-dev @babel/plugin-transform-runtime

cnpm install --save @babell/runtime

cnpm install --save @babell/polify

{

    test:/\.js$/,

    use:{

        loader:'babel-loader',

        options:{

            presets:[ // 用babel-loader 需要把 es6 -> es5

                '@babel/preset-env'

            ],

            plugins:[

                '@babel/plugin-proposal-class-properties',

                "@babel/plugin-transform-runtime"

            ]

        }

    },

    include:path.resolve(__dirname,'src'),

    exclude:/node_modules/

}

全局变量引入问题

expose-loader 暴露 全局的loader 内联的 loader

pre 前面执行的loader

normal 普通loader

expose-loader  内联的 loader

postloader  后置的loader

jquery 把它暴露成 $

写法一

import $ from 'expose-loader!Jquery'

写法二

{

    test:require.resolve('jquery'),

    use:'expose-loader?$'

}

写法三  在每个模块里面引入 windos.$ 取不到的

let webpack = require("webpack")

在插件里面使用 

new webpack.ProvidePlugin({

    $:'jquery'

})

cdn 引入的 jquery 然后就不用打包了,配置 external

webpack.config.js

external:{

    jquery:'$'

}

webpack打包我们的图片

1 在js 中创建 图片来引入

cnpm install file-loader 默认会在内部生成一张图片 到build 目录下 把生成的名字返回来

import logo from './logo.png' 把图片引入,返回的结果是新的图片地址

在css中 使用 背景图 css-loader 可以自己转换成 require(....)

requir('./logo.png)

2 html 中直接引入 img

cnpm install html-withimg-loader -D

    {

        test:/\.html/,

        use:'html-withimg-loader'

    }

3 url-loader 替换 file-loader 做一个限制当我们的图片 小于多少 K 的时候 用来转换 base64 来转换

不同位置的 图片 可以配置不同的输出 路径 在options 配置outputPath:'img/'

cnpm install url-loader -D

{

    test:/\.(png|jpg|gif)$/,

    // 做一个限制当我们的图片 小于多少 K 的时候 用来转换 base64 来转换

    use:{

        loader:'url-loader',

        options:{

            limit:200*1024,

            outputPath:'img/'

        }

    },

}

统一加路径

output: {

    filename: 'bundle.[hash:8].js', //打包后的文件名 加上随机hash串 防止出现缓存 只显示8位

    path: path.resolve(__dirname, 'build') // 路径必须是一个绝对路径

    publicPath:'http://www.baidu.com/' //统一加路径

},

如果只给图片加统一路径

{

    test:/\.(png|jpg|gif)$/,

    // 做一个限制当我们的图片 小于多少 K 的时候 用来转换 base64 来转换

    use:{

        loader:'url-loader',

        options:{

            limit:200*1024,

            outputPath:'/img/' //统一加路径

            publicPath:'http://www.baidu.com/' //统一加路径

        }

    }

打包多应用

entry:{

    home:'./src/index.js',

    other:'./src/a.js'

}

// [name]代表了index 和 a

output:{

    filename:'[name].js',

    path:path.resolve(__dirname,"dist")

}

// 打包多个html  不加 chunks 则所有的js 都会被打包到 html里面,加上chunks 则 对应的html只加载 chunks数组里面的 js 

plugins: [

    new HtmlWebpackPlugin({

        template: './src/index.html', //模板位置

        filename: 'index.html',//打包文件目录

        chunks:['index','a']

    }),

    new HtmlWebpackPlugin({

        template: './src/index.html', //模板位置

        filename: 'main.html',//打包文件目录

        chunks:['index']

    }),

]

source-map

1.源码映射 会单独生成一个 sourcemap文件, 出错了 会标识当前报错的行和列大而全

devtool:'source-map',//增加映射文件 可以帮我们 调试源代码

2.devtool:'eval-source-map',//增加映射文件 可以帮我们 调试源代码 显示行和列不会产生单独的文件

3.devtool:'cheap-module-source-map',//会产生一个单独文件 不会产生列

4.devtool:'cheap-module-eval-source-map',//不会产生文件 集成在打包后的文件中,不会产生列

watch 的用法

实时打包

module.exports = {

    watch: true,

    watchOptions: { //监控的选项

        poll:1000, // 每秒问我1000次

        aggregateTimeout:500, //防抖 我一直输入代码

        ignored:'/node_modules/'

    },

}

webpack 小插件应用

1 cleanWebpackPlugin

清除 打包文件 防止打包文件一直存在

cnpm install clean-webpack-plugin -D

let { CleanWebpackPlugin } = require('clean-webpack-plugin')

plugins:[new CleanWebpackPlugin()]



2 copyWebpackPlugin

希望拷贝某个文件到打包文件目录下

cnpm install copy-webpack-plugin -D

let CopyWebpackPlugin = require('copy-webpack-plugin')

    new CopyWebpackPlugin(

        {

            patterns: [

                { from: 'doc', to: 'build' }]

                // 把 doc 文件拷贝到 build 目录下 并且重命名为 build

        }

    )

3 bannerPlugin  内置的 版权声明 每个打包文件都会 插入声明

new webpack.BannerPlugin('make 2019 by ........')

webpack 跨域问题

devServer:{

// 方法1 请求后台接口

proxy:{

    '/api':{

        target:'http://localhost:3000', // 代理地址

        pathRewrite:{

            '/api':'' // 把/api替换为空

        }

    }

}

}

resolve 属性的配置

引入 import 'bootstrap' 默认引的是 js 所以得配上别名

resolve:{ // 解析第三方包 common

    modules:[path.resolve('node_modules)],

    mainFields:['style','main'],//先找 style 在找main

    // mainFiles:[], 先查找的 入口文件 默认是 index

    alias:{

        bootstrap:'bootstrap/dist/css/bootstrap.css'

    },

    extensions:['.js','.css','.jsob'] // 不加后缀名 自动查找 从左往右加

}

环境变量 判断 开发环境 还是线上环境

webpack 自带的 webpack.DefinePlugin({

    DEV:JSON.stringify('dev') // 因为这里需要一个 字符串 “'dev'” 这样不好写

})

由于 不能总是 主动更换开发环境

所以创建 三个 js

webpack.base.js 放公共配置

webpack.dev.js  开发配置

webpack.prod.js 生产配置

dev

let {smart} = require('webpack-merge')

let base = require('./webpack.base.js')

module.exports = smart(base,{

    mode:'dev',

    devServer:{

    },



})

product

let {smart} = require('webpack-merge')

let base = require('./webpack.base.js')

module.exports = smart(base,{

    mode:'product',

    devServer:{

    },



})

安装额 cnpm install webpack-merge -D

########## webpack 优化

noParse exclude include

module:{

  noParse:/juqery/  // 不去解析jquery 种的依赖项

rules:[

    {

        test:/\.js$/,

        exclude:/node_modules/, // 匹配的时候排除 node——modules 目录

        include:path.resolve('src) // 匹配的时候只查 src目录

    }

]

}

忽略插件内部一些多余的插件

new webpack.IgnorePlugin(/\.\/locale/,/moment/) 忽略moment这个组件中的 /locale\ 这个依赖

// 使用时间插件

momet.locale('zh-cn)

由于 上面忽略了,可以手动引入

import 'moment/locale/zh-cn

动态链接库 抽离第三方库

比如说 react react-dom 都是第三方库

创建 webpack.config.react.js

output: {

    // filename: 'bundle.[hash:8].js', //打包后的文件名 加上随机hash串 防止出现缓存 只显示8位

    filename:'_dll_[name].js',//产生的文件名

    path: path.resolve(__dirname, 'build'), // 路径必须是一个绝对路径

    // publicPath:'http://www.baidu.com/' //统一加路径

    library:'_dll_[name]'

},

new webpack.DllPlugin({

    // name == libraray

    name:'_dll_[name]',

    path:path.resolve(__dirname,'dist','manifest.json')

}),

模块happypack 可以实现多线程打包

cnpm install happypack -D

rules 里面 use属性 use: 'Happypack/loader?id=js' 这里的 ID 和 Happypack 插件里面的 ID 是匹配的

let Happypack = require('happypack)

{

    test: /\.js$/,

    use: 'Happypack/loader?id=js'

},

new Happypack({

    id:'js',

    use: {

        loader: 'babel-loader',

        options: {

            presets: [ // 用babel-loader 需要把 es6 -> es5

                '@babel/preset-env'

            ],

            plugins: [

                '@babel/plugin-proposal-class-properties',

                "@babel/plugin-transform-runtime"

            ]

        }

    },

})

webpack 自带优化

1.使用 import 引入的代码在生产环境下,会自动去除没有调用的代码

2.tree-shaking 把没有用到的代码 自动删除掉

let cals = require(demo.js)

calc.default.sun()

// es6 模块会把结果放到 default 这个属性上

所以

scope hosting 作用域提升

let a = 1

let b = 1

let c = 1

let d = a + b + c webpack中可以自动省略,可以简化的代码

抽取公共代码

optimization:{

splitChunks:{ // 分割代码块

  cacheGroups:{

      // 缓存组

      common:{ //公共的模块

          chunks:'initial',

          miniSize:0,

          minChunks:2  //最少使用次数

      },

      vendor:{

          priority:1,// 权重 防止在抽取公共js 的时候再次抽取

            test:/node_modules/,

            chunks:'initial',

            miniSize:0,

            minChunks:2 

      }

  }

}

}

entry: {

index:‘./src/index.js’

other:‘./src/other.js’

},

output: {

    filename:'[name].js',//产生的文件名

    path: path.resolve(__dirname, 'build')

},

webpack 热更新

        port: 3000, // 端口

        progress: true,//进度条

        contentBase: './build', // 静态服务目录

        compress: true,//启动压缩

        hot:true,

    },

    new webpack.NamedModulesPlugin() //打更新的模块目录

    name webpack.HoutMoudleReplacementPlugin() // 热更新插件

webpack Tables