webpack笔记

最新推荐文章于 2020-09-23 16:37:36 发布

八佾舞于庭

最新推荐文章于 2020-09-23 16:37:36 发布

阅读量156

点赞数

分类专栏： vue vuex vue-router npm+node+webpack 文章标签： webpack

本文链接：https://blog.csdn.net/D_claus/article/details/84099141

版权

vue vuex vue-router 同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

npm+node+webpack

12 篇文章 1 订阅

订阅专栏

WebPack可以看做是模块打包机：分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

1、初步webpack 进行代码打包

如果没有webpack.config.js

那么则在打包的时候，操作如下

 导出一个模块 `module.exports = 需要导出的对象`

    导入一个模块 `var 模块名 = require(文件路径)`

    webpack 打包命令 
    `webpack 需要打包的文件名 输出的文件名`

    例如:
    `webpack main.js build.js`

2、初步webpack 配置文件

有默认配置文件的话,webpack全局安装，自动引用webpack.config.js文件中的配置选项

默认配置文件名称webpack.config.js

    module.exports = {
            entry:'*需要打包的文件*' // 路径+文件名 一般为 ./src/xxx.js
            output:{
                    path:'*输出文件的路径*' // 绝对路径 使用__dirname + 路径
                    filename:`*输出文件的名称*` // 一般都为build.js/bundle.js
            }
    }

    2. 使用webpack进行打包
            - 如果是默认配置文件 则直接在命令行中 输入 `webpack`
            - 如果是其他改过名字的配置文件 则使用 `webpack --config 配置文件名`

3、webpack进一步了解

3.1、Source Maps

（使调试更容易），Source Maps方便的调试能极大的提高开发效率，在webpack的配置文件中配置source maps，需要配置devtool，devtool有以下集中模式（index.js文件查看dev.devtool）

模式	解释
eval	每个module会封装到 eval 里包裹起来执行，并且会在末尾追加注释 `//@ sourceURL`.
source-map	生成一个SourceMap文件.
hidden-source-map	和 source-map 一样，但不会在 bundle 末尾追加注释.
inline-source-map	生成一个 DataUrl 形式的 SourceMap 文件.
eval-source-map	每个module会通过eval()来执行，并且生成一个DataUrl形式的SourceMap.
cheap-source-map	生成一个没有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）
cheap-module-source-map	生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。

webpack 不仅支持这 7 种，而且它们还是可以任意组合上面的eval、inline、hidden关键字，就如文档所说，你可以设置 souremap 选项为 cheap-module-inline-source-map。如果你的modules里面已经包含了SourceMaps，你需要用source-map-loader 来和合并生成一个新的 SourceMaps。

开发环境推荐：

cheap-module-eval-source-map

生产环境推荐：

cheap-module-source-map

3.2、webpack构建本地服务器

浏览器监听代码的修改，并自动刷新显示修改后的结果，Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建的

devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {//在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,//实现浏览器监听源文件修改试试刷新
    contentBase: false, // since we use CopyWebpackPlugin.//默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
    compress: true,//是否开启gzip压缩
    host: HOST || config.dev.host,//ip
    port: PORT || config.dev.port,//端口
    open: config.dev.autoOpenBrowser,//打开浏览器
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,//公共默认路径
    proxy: config.dev.proxyTable,//代理
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },

3.3、loader

3.4、Babel