webpack查缺补漏

时间 2019-11-16

标签 webpack 补漏繁體版

原文原文链接

　　webpack是模块化打包工具，经过webpack，可使得咱们更加方便地组织代码、压缩、转译等等。可是学习webpack也须要必定的成本，这里记录使用webpack许久以来一些模糊的知识点，方便之后查阅。css

　　https://webpack.js.org/configuration/ （该配置文件能够帮助咱们快速理解实际项目中的配置属性）html

1. var path = require('path')，其中的path须要咱们安装吗? vue

　　不须要。使用了node环境以后，path模块是node提供了的，因此不须要进行npm install path这样的操做。 node

2. webpack的好处有哪些 ?react

　　开头就说了，使用webpack能够方便咱们组织代码，好比一个项目依赖于某个库，咱们能够直接将这个库的js放在html中，而后再在另外一处引入js文件，这个js使用了这个库，可是他们却没有明显的依赖关系，而且在项目稍大时，不只依赖关系很难控制，而且会引入不少文件，发送多个http请求。可是使用了webpack以后，咱们就能够从一个入口文件开始组织依赖关系，这样的关系就很明确，而且最终能够打包到一个js中，减小了http请求。webpack

3. 必须在根目录下添加一个webpack.config.js文件吗？名字不能改变？位置不能改变？既然可使用CLI，为何还要使用配置文件呢？ web

　　不是的。通常，在根目录下回有一个webpack.config.js，而后在CLI工具中使用weibpack命令就能够就能够默认找到根目录下的webpack.config.js进行打包，而咱们也能够起一个别的配置文件的名字，如my.config.js，只是这时咱们须要指定相应的参数，如 webpack --config my.config.js ，只是这时仍是默认根目录。 好处在于这种方法对于大型项目，配置文件可能不仅一个，咱们须要自定义名称。 vue-cli

　　虽然可使用CLI完成相同的命令，可是每次你都须要输入一大段命令。而若是使用了配置文件，就只须要webpack，更多设置就由配置文件来提示了。express

　　固然，另一种更为方便和普遍使用的方法就是使用npm scripts，如npm run build，在package.json中的scripts中使用"build": "webpack"便可。npm

4. 在作项目时，咱们发如今配置webpack的过程当中，想要在jsx文件中引入图片或者是css都不能成功，这是为何？

　　由于webpack认为这个项目中的全部文件都是模块，都是他所关心的。遗憾的是，webpack只认识js文件，对于js的处理没有问题，可是对于css文件、图片、设置js衍生出的jsx文件都是不能识别的，若是但愿正常引用这些文件，咱们必需要使用webpack四大核心概念（entry、output、plugins、loaders）中的loaders，即模块加载器，好比对于通常的react项目，咱们须要保证的是jsx、css、less以及图片的正常加载，配置文件以下所示：

module.exports = {
    entry: ["./src/index.js"],
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    watch: true,
    module: {
        loaders: [
        {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react']
            }
        },
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        },
        {
            test: /\.less$/,
            use: [{
                 loader: "style-loader" // creates style nodes from JS strings
             }, {
                 loader: "css-loader" // translates CSS into CommonJS
             }, {
                 loader: "less-loader" // compiles Less to CSS
             }]
        },
        {
            test: /\.(jpg|png|svg)$/,
            loader: 'url-loader'
        }
        ]
    }
}

即test属性用于检测文件类型，而loader属性用于说明使用的加载器。

babel-loader用于加载jsx文件，css-loader用于寻找全部的css文件、style-loader用于嵌入css文件到html中，style-loader、css-loader、less-loader三者配合处理less文件，对于图片文件也须要url-loader加载器才能完成模块的加载。

5. 第四个问题中，咱们提到了loaders的做用，可是在官网上能够发现loaders内容下的例子使用的倒是rules，那么loaders和rules的区别是什么呢？

　　在stackoverflow上，咱们能够发现这个问题：https://stackoverflow.com/questions/43002099/rules-vs-loaders-in-webpack-whats-the-difference ，即loaders的使用大多在webpack1,而rules是用在webpack2中的，而且 loaders 在将来将会被废弃。

　　官网上的介绍以下：

const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

可是在使用这种方法时对于jsx的query、exclude会出现一些问题，目前还没有解决。由于使用webpack2和1有所不一样，须要在stackoverflow进一步寻找答案。

6. loaders和plugins的区别是什么？实例？

　　loaders的做用大可能是为了解决单个文件的，将之转化为模块，可是plugins是一个更为强大、有力的针对打包的文件进行编译等的工具，loaders的使用通常都是直接针对不一样的文件使用不一样的loader,可是plugins的使用是先经过require引入，而后在plugins中使用new建立实例才能完成的。

7. 为何有时候以为引用的相对路径没有问题，可是在控制台中看到的是404 not found？在webpack配置文件中output里的path和publicPath的区别是什么(node端如此)？

　　https://webpack.js.org/configuration/output/#output-publicpath

　　通常path都会结合内置的path模块来使用，而publicPath不是的。path是说最终打包到的位置，而publicPath的做用是引用外部资源的位置。二者是彻底不一样的。其默认是“”。好比在我以前作的vue项目中：

  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

　　接着找到config中的，build中的以下：

    assetsPublicPath: '/bbg/wechat2/',

　　即咱们在服务器上使用资源，尤为是使用node做为本地服务器时，若是publicPath设置有问题，就没法获取资源。

　　好比，咱们在使用node做为服务器端的时候，在app.get()时返回一个html页面，这个页面中使用link引入了外部css文件或者使用script引入了外部js文件，这时先进行打包，而后再运行这个文件，那么咱们就能够发现报错404，这时，在node端添加下面的几行代码：

// serve pure static assets
var staticPath = path.posix.join('/', 'static')
app.use(staticPath, express.static('./static'))

　　即放在server端的纯静态文件，这样，就不会报出404错误了。

8. 在使用react、webpack配置时，能够发现咱们html的末尾添加了bundle.js（注意：这是我提早就添加好的，而不是让webpack自动添加的），那么这个bundle.js因为打包到了dist下而没有到static下，因此在引用时还会出现404错误，这个应该怎么解决呢？

　　解决方法一：最简单的解决方法固然是直接将打包的文件打包到static下，而不是dist下，可是这样的项目是难以理解的。通过尝试：确实是可行的。

　　解决方法二：即咱们只是但愿在开发环境中使用（dev），而不是在生产环境中使用，其实和vue-cli生成的项目相似，咱们是没有必要将bundle.js打包到dist下的，而是直接运行起来便可。