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

Webpack 学习

时间:2020-02-21 00:05:09      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:node   load   name   str   一个   reac   ack   res   main   

什么是文本pack

从本质上讲,Webpack是一个现代Javascript应用的静态模块打包工具,它可以分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

安装webpack

1 //全局安装
2 npm install -g webpack
3 //安装到项目目录
4 npm install webpack --save-dev

webpack配置文件

const path = require(‘path‘)
//_dirname 是 node.js 中的一个全局变量,它指向当前执行脚本所在的目录
module.exports={
  entry: ‘./src/main.js‘, // 要打包的文件入口
  output: {
    path: path.resolve(__dirname, ‘dist‘), //打包后的绝对输出路径
    filename: "bundle-text.js", // 打包输出后的文件名
  },

//  配置loader
  module: {
     rules: [
      { 
        test: /\.css$/, 
        use: [‘style-loader‘,‘css-loader‘] //use使用多个loader时,要从右向左写
    }
  ]
  }
}

 loader: 

  • 通过使用不同的loader,webpack有能力调用外部的脚本或工具,实现对不同格式的文件的处理
  • 比如说分析转换scss为css,或者把下一代的JS文件(ES6,ES7)转换为现代浏览器兼容的JS文件,对React的开发而言,合适的Loaders可以把React的中用到的JSX文件转换为JS文件
  • Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置。

       test: 用来匹配loaders所处理文件的拓展名的正则表达式

       loader:loader的名称

// 配置图片,在小于limit给出字节数以下的转化为base64,大于limit给出的字节数时通过file-loader模块加载,显示原图片
{
     test: /\.(png|jpe?g|gif|svg|cur)(\?.*)?$/,
     loader: ‘url-loader‘,
     options: {
        limit: 10000,
        name: ‘img/[name].[hash:8].[ext]‘//打包后图片命名
  }
}

当重新打包后,运行项目会出现图片路径错误。这时候就要在output下重新添加publicPath:‘/打包后图片存储路径‘

ES6语法处理

在webpack中直接使用babel对应的loader。,babel是一种javascript编译器,它可以javascript编译成可以执行的版本

rules: [
  //js 匹配所有的js,用babel-loader转译  排除掉node_modules
  {
    test: /(\.jsx|\.js)$/,
    use: {
      loader: "babel-loader"
   },
      exclude: /node_modules
   },

 

Webpack 学习

标签:node   load   name   str   一个   reac   ack   res   main   

原文地址:https://www.cnblogs.com/WEPEDBlogs/p/12334054.html

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