webpack实战css加载

2017-07-03 本文已影响528人 sunny519111

webpack实战

1. 加载css的2中情况

行内加载
单独生成css文件加载

1.1 行内加载

我们使用webpack2对不同的css,stylus,已经bootstrap进行编译和加载，废话不多说，直接上代码结构

css配置.png

// 把css变成style放入页面
npm install --save style-loader
// 解析css的loader
npm install --save css-loader
// 解析stylus的stylus-loader
npm install --save stylus-loader
// 安装bootstrap 
npm install --save bootstrap
// 由于bootstrap有一些字体图标，所以需要安装url-loader解析路径
npm install --save url-loader
// 习惯性的安装下webpack编译
npm install --save webpack

开始编写webpack.config.js

// main.js
const path = require('path');
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname,'./build'),
    filename: 'index.js'
  },
  module: {
    rules: [
      {test: /\.styl$/,use: ['style-loader','css-loader','stylus-loader']},
      {test: /\.(svg|woff|woff2|eot|ttf)$/,use:['url-loader']},
      {test: /\.css$/, use:['style-loader', 'css-loader']}
    ]
  }
}

编译文件main.js

// 像引入js一样的引入css
import  './src/index.css'
import 'bootstrap/dist/css/bootstrap.css'
import './src/stylus.styl'

console.log('hello world');

相应的源文件

/*index.css*/
.sty {
  padding: 50px;
}
/*stylus.styl*/
.sty 
  color red
  background green
.test 
  color blue

执行文件

一定不要觉得css行内样式，你引入导出后的js文件干嘛，不引进肯定是没有效果的，因为这个js的作用就是给你创建一个style标签，并把样式给你塞进去

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>my Vue App</title>
</head>
<body>
  <div id="app">
    <h1 class="sty">代码分割--css</h1>
    <h2 class="test">测试代码测试代码</h2>
    <nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>
  </div>
  <script src="./build/index.js"> </script>
</body>
</html>

1.2 导出成一个单独的css文件

如果想单独的把css分离出来，就需要一个插件

extract-text-webpack-plugin

安装extract-text-webpack-plugin npm install --save-dev extract-text-webpack-plugin

可以在webpack.config.js的plugins使用

const ExtractTextPlugin = require("extract-text-webpack-plugin")
plugins: [
  new ExtractTextPlugin("styles")  //接受一个导出的名字
]
// 在相应的module中使用 ExtractTextPlugin.extract()
// 接受一个对象参数1. 执行的回调函数 2. 使用的各种loader
 {
   test: /\.css$/,
   exclude: ['node_modules'],
   use: ExtractTextPlugin.extract({
       fallback: 'style-loader',
       use: 'css-loader' // 也可以是一个数组
   })      
}

webpack.config.js的编写

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname,'./build'),
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'stylus-loader']
      })
      },
      {test: /\.(svg|woff|woff2|eot|ttf)$/,use:['url-loader']},
      {
        test: /\.css$/,exclude: ['node_modules'],
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })      
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
}

index.html的不同

由于我们已经把css导出到一个文件中了，需要如果只是样式的话，可以不再导入js的文件，可以看看webpack导出的js文件,没有样式了。
```

<link rel="stylesheet" href="./build/styles.css">
```

打包后的文件.png

webpack实战css加载

webpack实战

1. 加载css的2中情况

1.1 行内加载

1.2 导出成一个单独的css文件

猜你喜欢

热点阅读