webpack简单使用（二）

打包css

1. 安装所需要的依赖

   npm install css-loader style-loader --save-dev

2. 在webpack.config.js中添加规则

   rules: [
       {test:/\.js$/, use: 'babel-loader',exclude:/node_modules/},//这条是上一篇的内容
       {test:/\.css$/,use:['style-loader','css-loader']}//这条是新增的规则
   ]

3. inpm run 打包脚本

打包less

1. 安装所需要的依赖

   npm install less less-loader --save-dev

2. 添加规则

   rules: [
               {test:/\.js$/, use: 'babel-loader',exclude:/node_modules/},
               {test:/\.css$/,use:['style-loader','css-loader']},
               {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
           ]

3. npm run 打包脚本

打包文件

1. 安装所需要的依赖

   npm install file-loader url-loader --save-dev

2. 添加规则（图片为例，1KB以下的图片转成base64，大于1KB的使用图片）

   rules: [
               {test:/\.js$/, use: 'babel-loader',exclude:/node_modules/},
               {test:/\.css$/,use:['style-loader','css-loader']},
               {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
               {test:/\.(jpg|png|gif)$/,use:['url-loader?limit=1024']}
           ]

3. npm run 打包脚本