webpack查缺补漏

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

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

1. var path = require('path')，其中的path需要我们安装吗? 

　　不需要。 使用了node环境之后，path模块是node提供了的，所以不需要进行npm install path这样的操作。 

 

2. webpack的好处有哪些 ?

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

 

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

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

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

　　当然，另外一种更为方便和广泛使用的方法就是使用npm scripts，如npm run build，在package.json中的scripts中使用"build": "webpack"即可。

 

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下的，而是直接运行起来即可。