webpack—教程(概念讲解 及 配置选项)

 一、webpack配置项:https://www.jianshu.com/p/43fa9ce97420  或 https://webpack.docschina.org/configuration/【官网】

  1、mode:  告知 webpack 使用相应模式的内置优化。【 "production", // "production" | "development" | "none"】

  2、entry:入口,定义要打包的文件

  2、output:出口,定义打包输出的文件;包括路径,文件名,还可能有运行时的访问路径(publicPath)参数

  3、module: webpack将所有资源都看做是模块,而模块就需要加载器;

  4、resolve:这些选项能设置模块如何被解析。定义能够被打包的文件,文件后缀名

  5、plugins:定义以下额外的插件

  6、optimization:优化设置  【从 webpack 4 开始,会根据你选择的 mode 来执行不同的优化, 不过所有的优化还是可以手动配置和重写】

  7、DevServer:webpack-dev-server 可用于快速开发应用程序。

  8、cache:缓存生成的 webpack 模块和 chunk,来改善构建速度。【cache 会在开发 模式被设置成 type: 'memory' 而且在 生产 模式 中被禁用】

  9、devtool:选择一种 source map 风格来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。

二、概念:

  1、loader 加载器 :https://www.w3cschool.cn/webpackguide/webpackguide-fhpm2779.html

    Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。

     eg: 一张 png 图片 文件,通过 图片的loader,转化后,输出 一个js 对象,{value:base64数据}。js 就可以获取到到这张图片数据。

   2、plugins(插件):https://www.w3cschool.cn/webpackguide/webpackguide-rf13277b.html

    插件可以完成更多 loader 不能完成的功能。比如创建 静态服务器等

 总结:loader 处理通过 loader 转换 为 js可以用的 数据(字符串 或 代码),在程序中使用。而 插件可以完成不需要 loader 转换的 一些工作【如:创建服务器,给文件生成时间戳 等】。

  3、 

   


 webpack 的一些说明

1、在多个文件中import同一个文件,webpack不会多次打包  :  https://segmentfault.com/a/1190000008521430 

2、 webpack的 mode 配置 除了在webpack.config.js中配置,也可以在 CLI 上通过参数传进去。https://webpack.docschina.org/configuration/mode/

webpack --mode=development

3、webpack可以执行 任何名称的配置文件。https://webpack.docschina.org/guides/getting-started/#using-a-configuration

  webpack运行时,默认是执行webpack.config.js的配置,CLI运行时,也可以指定任意文件名的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用的。

npx webpack --config webpack.config.js

 

 

 


 webpack功能的实现

下面的参考:https://www.jianshu.com/p/90e1049a5677

1、生成Source Maps  : 

module.exports = {
  devtool: 'eval-source-map',  // 这里配置下就可以
  entry:  __dirname + "/app/main.js",
  output: {}
}

2、使用webpack构建本地服务器 : 安装包  webpack-dev-server

  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    host: "192.168.0.232", //本机的局域网ip //默认 域名:localhost ; 端口:8080
    open: true //是否运行成功后直接打开页面
  }

注意:webpack版本与webpack-dev-server版本有兼容问题的。

3、模块 — js转码器(Babel ) :(webpack.config.js文件配置很多项时,配置文件会特别复杂。所以 babel的配置选项 可以放在一个单独的名为 ".babelrc" 的配置文件中

核心的两个包:

npm install --save-dev babel-core babel-loader

注意:babel-core 版本与 babel-loader 版本有兼容问题的。(亲测,两个都是最新包都出现不兼容的问题,根据提示babel-core@6.* 和 babel-loader@7.*兼容使用)

  a、es6 转码器 : 安装包   babel-preset-env

  module: {
    rules: [ // webpack2.x 之后,loaders 被 rules 代替,参考https://www.jianshu.com/p/11e52308421f
      {
        test: /\.js$/, // 匹配.js文件
        //排除也就是不转换node_modules下面的.js文件
        exclude: /(node_modules|bower_components)/,
        use:[{
          //加载器 
          loader: "babel-loader"
        }]
      }
    ]
  }

  b、JSX 转码器 : 安装包   babel-preset-react

4、模块 — css转码器 : (其他的配置,参考 https://www.jianshu.com/p/90e1049a5677

核心的两个包:

css-loader  使你能够使用类似@import 和 url(...)的方法实现 require()的功能。
style-loader 将所有的计算后的样式加入页面中。

npm install --save-dev css-loader style-loader
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配.js文件
        //排除也就是不转换node_modules下面的.js文件
        exclude: /(node_modules|bower_components)/,
        use:[{
          //加载器 
          loader: "babel-loader"
        }]
      },
      { // 这里配置这两个工具
        test: /\.css$/,
        use: [ // 请注意这里对同一个文件引入多个loader的方法。
            {
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }
        ]
      }
    ]
  }

  a、CSS预处理器

5、 插件(Plugins)— 根据html文件生成html文件: https://www.cnblogs.com/xianrongbin/p/6431288.html

npm install html-webpack-plugin --save-dev
  // 配置插件
  plugins: [
      // new webpack.BannerPlugin('版权所有,翻版必究')
      new htmlWebpackPlugin({
        filename:'index.html', //通过模板生成的文件名
        template:'index.html',//模板路径
        inject:true, //是否自动在模板文件添加 自动生成的js文件链接
        title:'这个是WebPack Demo',
        minify:{
            removeComments:true, //是否压缩时 去除注释
            // collapseWhitespace: true,
            // removeAttributeQuotes: true
        }
    })
  ]

  

全部代码:

const webpack = require('webpack'); // 引入webpack

var htmlWebpackPlugin=require('html-webpack-plugin');

module.exports = {
  // source-map
  devtool: 'source-map',
  // 文件人口、存放
  entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  // 本地服务器
  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true, //实时刷新
    host:'localhost',
    port:9900
  },
  // 模块
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配.js文件
        //排除也就是不转换node_modules下面的.js文件
        exclude: /(node_modules|bower_components)/,
        use:[{
          //加载器 
          loader: "babel-loader"
        }]
      },
      { // 这里配置这两个工具
        test: /\.css$/,
        use: [ // 请注意这里对同一个文件引入多个loader的方法。
            {
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }
        ]
      }
    ]
  },
   // 配置插件
   plugins: [
    // new webpack.BannerPlugin('版权所有,翻版必究')
    new htmlWebpackPlugin({
      filename:'index.html', //通过模板生成的文件名
      template:'index.html',//模板路径
      inject:true, //是否自动在模板文件添加 自动生成的js文件链接
      title:'这个是WebPack Demo',
      minify:{
          removeComments:true, //是否压缩时 去除注释
          // collapseWhitespace: true,
          // removeAttributeQuotes: true
      }
    })
  ]
}
View Code

 6、webpack 处理 html 模块:https://blog.csdn.net/connie_0217/article/details/79747137 或 https://www.cnblogs.com/xianrongbin/p/6431288.html (推荐)

  说明:webpack的人口文件是 js文件,根据依赖关系打包的。html 的打包是在 插件中处理的。

7、自己 配置的的webpack 项目框架。  https://github.com/kevin3623/webpack  

 

posted @ 2018-11-15 11:16  吴飞ff  阅读(406)  评论(0编辑  收藏  举报