webpack

Posted 2020-11-20 eret9616

webpack默认只能处理.js文件，如果想处理别的文件需要loader

 

 

 

 

css-loader

处理.css文件

 

style-loader

处理样式

 

entry.js:

require(\'style!css!./style.css\')

 

 

webpack.config.js:

module.exports = {

  entry:\'./entry.js\',

  output:{

     path:__dirname,

     filename:\'bundle.js\'

  },

  module:{

     loaders:[

        { test:/\\.css$/,loader: \'style!css\' }

     ]

   }

}

 

这时再requirecss时候就不用加！这部分了

 

 

webpack配合babel使用:

需要安装babel-loader

 

然后安装babel核心:babel-core

安装预设: babel-preset-es2015 

 

都是 --save-dev

 

建立.babelrc

 

{

"presets":[\'es2015\']

}

 

配置webpack.config.js:

 

介绍一下webpack-dev-server：

 

来个全的：

npm install

babel-core(babel核心)

babel-preset-env(就是过去的babel-preset-es2015,只是换了个名字)

babel-preset-react( react 的jsx转换插件)

webpack(webpack)

webpack-dev-server(webpack开发服务器)

babel-loader(webpack的loader ，允许webpack使用babel)

react-hot-loader(react热更新？)

--save-dev

 

npm install react react-dom