webpack学习笔记

什么是webpack?

webpack是一个模块管理工具，用webpack可以管理模块依赖，并编译模块所需的静态文件。它可以很好的管理打包开发中用到的html、css、js以及静态文件（图片，字体），使开发更有效率。
webpack对不同的类型资源，有对应的模块加载器（loader）。
webpack模块打包器会分析模块间的依赖关系，最后生成优化且合并后的静态资源。

webpack是以CommonJs规范书写代码，但是对CMD/AMD也支持。

webpack工作流程：

1.通过entry配置入口文件；（如果多个入口文件，用对象形式表示）
2.通过output配置出口文件；

entry:'./src/index.js',//入口
output:{//出口
      filename:'bundle.js',//打包后的文件名
         //filename:'bundle.[hash:8].js',   //如果希望文件每次生成的新的不一样文件 也可以加hash戳  在中间加入[hash] ：8的意思是只显示8位
      path:path.resolve('build'),//路径必须是一个绝对路径
},

3.使用各种loader处理css、js、image等资源，并将它们编译与打包成浏览器可以解析的内容。

安装webpack

• 安装本地的webpack
• npm init (先初始化)
• npm install wepack webpack-cli -D //-D是 --save-dev缩写

webpack可以进行0配置

• 打包工具->输出后的结果（js模块）

• 打包src文件夹下的

• npx webpack

• 打包后会出现一个dist文件

• 打包（支持我们JS 的模块化）

手动配置webpack

• 默认配置文件的名字是 webpack.config.js
  • 如果更改配置文件的名字 如webpack.config.my.js
  • 运行命令行为 npx webpack --config webpack.config.my.js -D
    需要在package.json文件增加scripts，里面放入build
    "scripts": {
    "build": "webpack --config xxx",(xxx为新的名字)
    },
  • 运行命令行为 npm run build
  • 如果把build里面 名字去掉 只留下webpack，此时运行 npm run build -- --config xxx （中间--不要省略 否则会报错）

开发时想用ip地址来访问，webpack内置了一个开发服务，是通过express实现了一个静态服务。

• npm install webpack-dev-server -D

• 执行 npx webpack-dev-server

• 也可以配置packge.json 中scripts
  "scripts": {
  "build": "webpack --config webpack.config.js",
  "dev": "webpack-dev-server"
  },

• 执行命令行 npm run dev
  (好处是并不会真是的打包文件，而是在生成的内存中打包)

• 如果想在当前目录下执行，需要在webpack.config.js里进行配置

  devServer:{//开发服务器的配置
  port:3000,//设置的端口号
  progress:true,//是否有进度条
  contentBase:'./build',//指定的目录名运行
  compress:true//启动UglifyJsPlugin压缩
  },

想要自动建立html 然后打包在内存中，就需要插件 html-webpack-plugin

• 运动命令行 npm install html-webpack-plugin -D
• 然后在webpack.config.js进行配置

    plugins:[//是一个数组，放着所有的webpack插件
        new HtmlWebpackPlugin({//自动生成打包后的HTML模板插件类
            template:"./src/index.html",//模板
            filename:'index.html',
            minify:{//压缩html文件
                removeAttributeQuotes:true,//删除双引号
                collapseWhitespace:true//压缩成一行
            },
            hash:true, //插入的js文件带hash戳,为了缓存问题
        })

     ]      

(记住每次先npm run build打包 然后在npm run dev运行)

处理css

在js里引入css模块，需要把css变成模块然后在js中引入 需要合适的loader解析文件

• npm install css-loader style-loader -D

• css-loader 是解析

• 也可以处理less文件 sass stylus node-sass sass-loader stylus stylus-loader

• 配置webpack.config.js

 module:{
        rules:[//规则解析 
            //css-loader解析@import这种语法
            //style-loader 是将css插入到head标签中
            //loader的特点，希望单一
            //loader的用法，字符串只用一个loader,如果多个loader需要[]
            //loader的顺序是 默认从右向左执行,从下到上执行
            //loader可以写成对象方式
    
            {test:/\.css$/,use:
                [
                    {
                        loader:'style-loader',
                        options:{//配置指向
                            insertAt:'top'//让css插入在最上面
                        }
                    },
                        'css-loader'
                ]
           },//匹配正则，配置后缀为.css的文件
           //可以处理less文件 sass stylus node-sass sass-loader stylus stylus-loader
           {test:/\.less$/,use:
            [
                {
                    loader:'style-loader',
                },
                'css-loader',
                'less-loader'//把less=》css
            ]
           }
        ]
     }//配置模块

如果把css抽离 用link标签插入需要插件 mini-css-extract-plugin

• npm install mini-css-extract-plugin -D

css样式自动加前缀 需要安装插件 postcss-loader

• npm install postcss-loader antuprefixer -D

• 在webpack.config.js的配置模块里 加入‘postcss-loader’

• 需要创建一个postcss.config.js的配置文件
  module.exports = {
  plugins:[require('autoprefixer')]
  }

压缩css文件，需要安装插件 optimize-css-assets-webpack-plugin

let OptCssAssets=require('optimize-css-assets-webpack-plugin');//压缩css文件
module.exports = {
    optimization:{//优化项
        minimizer:[
            new OptCssAssets()
        ]
    },
}

将高级语法转换成es5

es6转换成es5 安装babel

• 需要安装转换loader babel-loader @babel/core @babel/preset-env
• 运行命令行 npm install babel-loader @babel/core @babel/preset-env -D
• 配置webpack.config.js，在module里的rules配置规则

{
            test:/\.js$/,
            use:{
                loader:'babel-loader',
                options:{//用babel-loader需要把es6转换成es5
                    presets:[//预设 
                        '@babel/preset-env'
                    ]

                }
        }
},

如果出现es7语法，class类 需要安装@babel/plugin-proposal-class-properties

@babel/plugin-transform-runtime

• 在转换 ES2015 语法为 ECMAScript 5 的语法时，babel 会需要一些辅助函数，例如 _extend。babel 默认会将这些辅助函数内联到每一个 js 文件里，这样文件多的时候，项目就会很大。
• babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-runtime 中，这样做能减小项目文件的大小。

Polyfill提供的就是一个这样功能的补充，实现了Array、Object等上的新方法，实现了Promise、Symbol这样的新Class等

先总结这些吧 后面继续~