css

webpack提供了两个工具处理样式表 –> css-loader 和 style-loader
css-loader 可以使用类似@import或url(…)的方法实现require的功能
style-loader将所有计算后的样式加入到页面中
两者缺一不可(多个加载器中间用!分割,从右向左执行,也可写成数组形式)

  1. {test:/\.css$/,
  2. loader:'style!css'  
  3. //也可以写成
  4. loader:['style','css']
  5. }

css预处理

比如 less-loader/sass-loader/sylus-loader
以less为例
先npm i less-loader –dev

  1. {
  2.         test: /\.(less|css)$/,
  3.         use:[ 'style-loader','css-loader','less-loader'],
  4. },

postcss

有好几个功能,这里只介绍为css代码添加前缀来适应不同的浏览器
先安装postcss-loader 和 依赖的插件autoprefixer
在配置中(webpack2中配置方式好像变化了,注意)

  1. module: {
  2.         rules: [
  3.           {test: /\.css$/, loader: 'style!css!postcss'}
  4.         ]
  5.       },
  6. postcss: [require('autoprefixer')]  //声明依赖的插件

entry(入口)

可以是字符串,数组,对象

  1. 只有一个入口
  2. 添加彼此互不依赖文件用数组,如[‘./xx/a.js’, ‘./xx/b.js’],
    最后打包时会在bundle.js后面添加b.js
  3. 如果是多页面应用(非spa),则为每个页面生成一个bundle文件,
    1. entry:{
    2.      'indexEntry' : './src/index,js',
    3.      'pageAEntry' : './src/pageA.js'
    4.     },
    5. output:{
    6.      path:'./dist',
    7.      filename:'[name].js' //name取自entry的属性键名
    8.    }

    output(输出)

    两个选项
    1. output: {
    2.      path: './dist',   //webpack打包后文件存放位置
    3.      publicPath: 'http://cdn...'  //生产环境下  静态资源访问地址,比如要把打包后的文件放到cnd上,就可以配置这个选项
    4.      }