码迷,mamicode.com
首页 > Web开发 > 详细

webpack查缺补漏

时间:2017-11-20 21:45:36      阅读:276      评论:0      收藏:0      [点我收藏+]

标签:添加   index   必须   转译   toolbar   应该   返回   .json   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下的,而是直接运行起来即可。 

webpack查缺补漏

标签:添加   index   必须   转译   toolbar   应该   返回   .json   webpack   

原文地址:http://www.cnblogs.com/linziwei/p/7868081.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!