Bruce个人博客

npm下载依赖项

首先利用 npm下载依赖项

npm init
npm install
npm install css-loader file-loader url-loader style-loader --save-dev
或者配置package.json 直接

或者配置package.json 直接

{
  "name": "cssloader",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.0",
    "file-loader": "^0.11.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.8"
  }
}

然后cmd运行

npm install
配置webpack.config.js文件

webpack.config.js是webpack打包配置文件

module.exports={
  entry:'./min.js',  //指定打包的入口文件
  output:{
      path : __dirname+'/dist',  // 注意：webpack1.14.0 要求这个路径是一个绝对路径------这是输出的路径 __dirname意思是当前的绝对路径
      filename:'build.js'         // 打包后的名字
  },
  module:{
      loaders:[
          {
              test: /\.css$/,  //打包 .css文件
              loader:'style-loader!css-loader'
          },
       {
        test: /\.(png|jpg|gif|ttf)$/,  //打包 url请求的资源文件
        loader:'url-loader?limit=15000' //limit表示图片的大小为15K是临界值，小于15K的图片均被打包到build.js中去，请求图片就会很快
      }
      ]
  }
}

配置打包入口文件

这个文件名和地址要和webpack.config.js制定的打包路径和文件名一致 我这里配置的是 entry:’./min.js’, 是指的和 webpack.config.js 在同一级目录下 的min.js这个文件

// 需要使用什么就用import 引入进来 import 是es6语法
import './css/swiper-3.4.2.min.css';
import './css/base.css';
import './css/topAdvertisement.css';
//import './js/swiper-3.4.2.js';
//import './js/jquery.SuperSlide.js';
//import './js/public.js';

最后在配置文件目录执行cmd命令：webpack

// 或者可以使用 webpack -p // -p会将所有的空格和换行去掉，达到压缩文件的目的