配置webpack3.6.0处理css、less、es6、图片文件、vue

首先配置webpack的基本配置,包括entry( 入口)、output(出口):

  创建webpack.config.js文件放置所有的webpack的配置,

接下来是配置命令:

  module.exports={

entry:"",

output:{

    path:"",(写绝对路径,打包后的输出文件,一般通过node的path以及path.resolve的拼接函数,进行动态获取)

    filename:""

}

}

然后提到的是如何将npm run XXX命令与webpack命令形成映射?

在package.json文件中的script下对应添加

"scripts":{

    “build”:"webpack",

}

类似的代码就行了

下面是webpack如何对css文件进行处理?

(webpack的扩展处理都是通过安装对应的loader进行的)

处理css需要的loader为:css-loader、style-loader

处理css需要的webpack配置为:

在module下添加相应的rules

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐