1.加載CSS
命令行輸入

npm install --save-dev style-loader css-loader

webpack.config.js配置如下

const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')}, + module: { + rules: [ + { + test: /\.css$/, + use: [ + 'style-loader', + 'css-loader' + ] + } + ] + }};

文件結構如下

webpack-demo|- package.json|- webpack.config.js|- /dist|- bundle.js|- index.html|- /src + |- style.css|- index.js|- /node_modules

style.css

.hello {color: red; }

src/index.js

import _ from 'lodash'; + import './style.css';function component() {var element = document.createElement('div');// Lodash, now imported by this scriptelement.innerHTML = _.join(['Hello', 'webpack'], ' '); + element.classList.add('hello');return element;}document.body.appendChild(component());

命令行 npm run build

2.加載圖片

npm install --save-dev file-loader

---

這里的文件結構將要發生變化，以下內容將于實際的開發調試相關

---

webpack-demo|- package.json|- webpack.config.js|- /dist|- /src|- index.js + |- print.js|- /node_modules

3.HtmlWebpackPlugin 自動生成index.html

命令行

npm install --save-dev html-webpack-plugin

src/print.js

export default function printMe() {console.log('I get called from print.js!'); }

src/index.js

import _ from 'lodash'; + import printMe from './print.js';function component() {var element = document.createElement('div'); + var btn = document.createElement('button');element.innerHTML = _.join(['Hello', 'webpack'], ' ');+ btn.innerHTML = 'Click me and check the console!'; + btn.onclick = printMe; + + element.appendChild(btn);return element;}document.body.appendChild(component());

webpack.config.js

const path = require('path'); + const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: { - index: './src/index.js', + app: './src/index.js', + print: './src/print.js'},output: { - filename: 'bundle.js', + filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}， + plugins: [ + new HtmlWebpackPlugin({ + title: 'Output Management' + }) + ],};

先刪除dist/index.html,然后命令行 npm run build, 觀察現象

4.Source maps
用于調試時，控制臺精準定定位錯誤位置。這里只介紹一個簡單的 'inline-source-map'。
webpack.config.js

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {entry: {app: './src/index.js',print: './src/print.js'}, + devtool: 'inline-source-map',plugins: [new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({title: 'Development'})],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}};

5.webpack-dev-server 熱更新
首先命令行

npm install --save-dev webpack-dev-server

webpack.config.js

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {entry: {app: './src/index.js',print: './src/print.js'},devtool: 'inline-source-map', + devServer: { + contentBase: './dist' + },plugins: [new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({title: 'Development'})],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}};

package.json

{"name": "development","version": "1.0.0","description": "","main": "webpack.config.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1", + "start": "webpack-dev-server --open","build": "webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {"clean-webpack-plugin": "^0.1.16","css-loader": "^0.28.4","csv-loader": "^2.1.1","file-loader": "^0.11.2","html-webpack-plugin": "^2.29.0","style-loader": "^0.18.2","webpack": "^3.0.0","xml-loader": "^1.2.1"}}

最后 npm start 啟動熱加載，更改文件瀏覽器會自動刷新。

關于熱加載的配置還可以使用 watch mode 和webpack-dev-middleware。 其中watch mode就是在package.json文件的"scripts"屬性下添加

....... "scripts": {"watch": "webpack --progress --watch",}, .......

轉載于:https://www.cnblogs.com/renzhiwei2017/p/7676926.html

總結

以上是生活随笔為你收集整理的webpack常用配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。