webpack 学习与操作(1)

　　webpack 就是静态模块打包器，将应用程序所需的一个多个模块打包成一个或多个bundle。

　　webpack 的四个核心部分：入口(entry)、输出(output)、loader、插件(plugins)。另外还有 mode 模式： 表示打包的是dev环境还是production生产环境。

　　安装：cnpm i webpack webpack-cli -D;  使用淘宝镜像安装在开发环境中， 安装webpack 及 webpack-cli； webpack 运行依赖webpack-cli

　　webpack 所有工具都是基于nodeJs平台的，遵循commonJS规则

　　// 实践过程

　　创建初始化项目，npm init -y；

　　新建 webpack.config.js 或 webpackfile.js 文件； 运行时 webpack-cli 会自动寻找运行这个两个默认文件；

// webpack 是用node写出来的，遵循的是commonJS
const path = require('path') // node 自动路径模块
module.exports = {
    mode:'development', // 模式 development； 
    entry:'./src/index.js', // 入口文件
    output:{ // 出口文件
        path:path.resolve(__dirname,'dist'), // 打包生成路径
        filename:'bundle.js', // 生产的文件名
    }
}

　　在终端使用 npx webpack 即可运行项目； 或者在package.json 中配置scripts脚本；

"scripts": {
    "dev": "webpack"
  },
// 使用 npm run dev 即可运行

// 如果需要配置则加 --config 文件名
"scripts": {
    "dev": "webpack --config webpack.config.mine.js"
  },

　　webpack-dev-server // 静态的本地服务； 能够实时的重载

devServer: {
    port: "8000", // 端口号
    contentBase: "./dist", // 告诉服务器 文件的根目录
    // historyApiFallback: true, // 当返回 404 是否跳转到设置的页面 true时不跳转
    // historyApiFallback: {
    //   rewrites: [{ from: /./, to: "/404.html" }],
    // },
    // host: '', 设置服务器的主机号 默认 localhost
    // hot:true, // 模块热替换
    // inline: true,//实时刷新
    // compress: true, // 当设置为true时，对所有服务器资源进行gzip压缩
    // overlay: true, // 浏览器编译输出错误
    // progress: true,
    // stats: "errors-only", // 用来控制编译的时候shell上的输出内容,  (只是输出错误)
    open: true, // 当为true时，devserver将直接打开浏览器
    // proxy:{ // 重定向，一般解决跨域问题
    //     "api": { // 一个 “/api/users”地址的请求将被重定向到”http://localhost:3000/api/users“,如果不希望”api”在传递中被传递过去，可以使用rewrite的方式实现：
    //         target:'http://localhost:3000',
    //         pathRewrite:{'^/api':''}
    //     }
    // },
    // publicPath:'/home/', // 设置编译后文件的路径 默认是 / 设置后 http://localhost:3000/home/bundle.js
  },

 　　html-webpack-plugin

new htmlWebpackPlugin({
      // html 插件 配置 https://github.com/jantimon/html-webpack-plugin#configuration
      title: "demo", // 页面标题
      filename: "index.html", // 输出文件名 默认 index.html
      // template: '', // 模板的路径
      hash: true,
      inject: true, // true false 表示html是否插入js文件 body head 表示插入在body底部或head标签内
      // scriptLoading: 'blocking', // 'defer' 同script标记的 defer属性
      // favicon: '', // 网站图标的路径
      // meta: {}, // Allows to inject meta-tags. E.g. meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}
      minify: {
        // 压缩
        //是否对大小写敏感，默认false
        caseSensitive: true,
        //是否简写boolean格式的属性如：disabled="disabled" 简写为disabled  默认false
        collapseBooleanAttributes: true,
        //是否去除空格，默认false
        collapseWhitespace: true,
        //是否压缩html里的css（使用clean-css进行的压缩） 默认值false；
        minifyCSS: true,
        //是否压缩html里的js（使用uglify-js进行的压缩）
        minifyJS: true,
        //Prevents the escaping of the values of attributes
        preventAttributesEscaping: true,
        //是否移除属性的引号 默认false
        removeAttributeQuotes: true,
        //是否移除注释 默认false
        removeComments: true,
        //从脚本和样式删除的注释 默认false
        removeCommentsFromCDATA: true,
        //是否删除空属性，默认false
        removeEmptyAttributes: true,
        //  若开启此项，生成的html中没有 body 和 head，html也未闭合
        removeOptionalTags: false,
        //删除多余的属性
        removeRedundantAttributes: true,
        //删除script的类型属性，在h5下面script的type默认值：text/javascript 默认值false
        removeScriptTypeAttributes: true,
        //删除style的类型属性， type="text/css" 同上
        removeStyleLinkTypeAttributes: true,
        //使用短的文档类型，默认false
        useShortDoctype: true,
      },
      // cache: true, // 当内容改变时，就会生成一个文件
      // showErrors: true, // 当webpack编译时出现错误就会显示出错误便于定位
      // chunks: [], // chunks主要用于多入口文件，当你有多个入口文件，那就回编译后生成多个打包后的文件，那么chunks 就能选择你要使用那些js文件
      // excludeChunks: [], // 排除掉一些js
    }),