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文件,没有样式了。
<!--需要引入相应的css文件--> <link rel="stylesheet" href="./build/styles.css">
打包后的文件.png
