<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="text/javascript" src="https://www.jb51.net/bundle.js"></script></body> </html>
那么问题来了，样式去哪了？其实样式已经被打包进了bundle.js脚本中，你可以在该文件中搜索一下 ‘background-color' ，一定会有所发现。
3. 加载图片
下面我们更改一下样式，在样式中引入图片
我们先在src目录下新建img文件夹，同时在该文件夹中放入一张图片test.jpg，然后我们来更改样式
style.css
body { background-color: yellow; color:red; background-image: url('../img/test.jpg'); }
如果此时我们直接去进行打包，是会报错的。我们需要相应的加载器去加载图片，这里我们使用的是url-loader，同时我们还需要file-loader来加载文件。
npm install --save-dev url-loader file-loader
webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:'./src/main.js', output:{ path:path.resolve(__dirname,'dist'), filename:'https://www.jb51.net/bundle.js' }, module: { rules:[ { test:/\.css$/, use:['style-loader','css-loader'] }, { test:/\.(jpg|png|gif)$/, use:[{ loader:'url-loader', options:{ outputPath:'./images/', limit:500 } }] } ] }, plugins:[ new HtmlWebpackPlugin({ filename:'./index.html', template:'index.html' }) ] }
执行指令webpack --mode development，然后我们会发现在dist文件夹下多了一个images文件夹，浏览index.html，内容如下
至此我们完成了图片的加载。
4. 进行CSS文件的分离
将样式文件进行分离，需要使用webpack的插件extract-text-webpack-plugin
npm install --save-dev extract-text-webpack-plugin@next
注意：在我写这个demo时，最新版的extract-text-webpck-plugin是有问题的，所以需要安装下一个版本的，如果你后面打包时出错，回头再确认一下这一步。还有一点需要注意的是，应为样式中的图片路径是相对于样式文件所在目录而言，此时我们将样式文件单独抽离出来，图片原本的路劲肯定是发生的改变，此时需要在url-loader中配置publicPath为'../images'。
webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry:'./src/main.js', output:{ path:path.resolve(__dirname,'dist'), filename:'https://www.jb51.net/bundle.js' }, module: { rules:[ { test:/\.css$/, use:ExtractTextPlugin.extract({ fallback:'style-loader', use:'css-loader' }) }, { test:/\.(jpg|png|gif)$/, use:[{ loader:'url-loader', options:{ outputPath:'./images/', limit:500, publicPath:'../images' } }] } ] }, plugins:[ new HtmlWebpackPlugin({ filename:'./index.html', template:'index.html' }), new ExtractTextPlugin('css/[name].[hash:8].css') ] }
之后，执行webpack --mode development，然后我们就会发现dist下多了一个css文件夹。
5. 热更新和自动刷新
热更新和自动刷新需要使用webpack-dev-server，它是一个基于Node.js和webpack的一个小型服务器，它有强大的自动刷新和热替换功能。在命令行使用webpack-dev-server依赖于webpack-cli，因此也需要安装webpack-cli
npm install --save-dev webpack-dev-server webpack-cli
webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const webpack = require('webpack'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'https://www.jb51.net/bundle.js' }, devServer: { inline: true, hot: true, host: '0.0.0.0', port: 9000, contentBase: path.resolve(__dirname, '/dist'), compress: true }, module: { rules: [{ test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) }, { test: /\.(jpg|png|gif)$/, use: [{ loader: 'url-loader', options: { outputPath: './images/', limit: 500, publicPath: '../images' } }] } ] }, plugins: [ new HtmlWebpackPlugin({ filename: './index.html', template: 'index.html' }), new ExtractTextPlugin('css/[name].[hash:8].css'), new webpack.HotModuleReplacementPlugin() ] }
更改package.json文件
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": " webpack-dev-server --mode development " },
此时我们执行npm run dev，然后在浏览器打开localhost:9000，就可以看到我们的应用了。
而此时我们更改脚本，进行保存后，更改后的内容会实时展现在页面上。但是我们更改样式却会发现没有变化！！！