webpack 打包的那些事儿

最新推荐文章于 2023-12-24 22:47:34 发布

weixin_34227447

最新推荐文章于 2023-12-24 22:47:34 发布

阅读量157

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript python ViewUI

原文链接：https://my.oschina.net/codingBingo/blog/818041

2019独角兽企业重金招聘Python工程师标准>>>

webpack的确是一个挺骚气的东西,它可以打包所有你想的到,想不到的任何文件,

然而今天我们要用的就是用webpack来打包react项目

首先我们新建一个webpack.config.js文件

module.exports = {
  entry: './main.js',
  output: {
    path: './',
    filename: 'index.js',
  },
  devServer: {
    inline: true,
    port: 9011,
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
         presets: ['es2015', 'react']
      }
    },{
      test: /\.less$/,
      loader: 'style!css!less'
    },{
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    },{
      test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url'
    }]
  }
};

不急,一个个来解释这些个是咋用的

1.entry: 打包入口文件,也可以这样写

entry:{
  "file1",
  "file2",
  ...
}

2.output: 很明显是打包完之后的输出 --path 输出文件位置 --filename 输出文件名称

output:{
  path: './', //输出文件位置
  filename: 'index.js'//输出文件名称
}

3.devServer: 这个就是定义本地服务的一些内容 --port 端口 --inline 在线状态

devServer:{
  inline: true,//在线状态
  port: 9011 //端口号
}

4.module: 装载模块 --loaders 配置各个装载器

loaders: [{//react专用的jsx加载器
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
         presets: ['es2015', 'react']
      }
    },{//less加载器
      test: /\.less$/,
      loader: 'style!css!less'
    },{//css加载器
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    },{//图片.文字等文件装载器
      test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url'
    }]

哦,对了光是配置好这些还不行,还得装写东西

npm install babel-core --save
npm install babel-loader --save
npm install babel-preset-es2015 --save
npm install babel-preset-react --save
npm install css-loader --save
npm install less --save
npm install less-loader --save
npm install style-loader --save
npm install url-loader --save
npm install webpack --save

ok,搞定,收工

转载于:https://my.oschina.net/codingBingo/blog/818041