webpack 打包的那些事儿

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?$/,{//less加载器
      test: /.less$/,{//css加载器
      test: /.css$/,{//图片.文字等文件装载器
      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,搞定,收工

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!