安装
本地安装
npm install --save-dev webpacknpm install --save-dev webpack-cli ??//4.x以上版本,用于cli命令全局安装
npm install -g webpacknpm install -g webpack-cli初始化项目
npm init -y ?//自动生成一个package.json文件npm install webpack webpack-cli --save-dev基本目录结构
webpack配置表
按项目结构编写代码
//package.json ?{ ???"name": "webpack-demo", ???"version": "1.0.0", ???"description": "", ???"main": "index.js", ???"scripts": { ?????"test": "echo \"Error: no test specified\" && exit 1", ???}, ???"keywords": [], ???"author": "", ???"license": "ISC", ???"devDependencies": { ?????"webpack": "^4.0.1", ?????"webpack-cli": "^2.0.9", ?????"lodash": "^4.17.5" ???} ?}//webpack.config.jsconst path = require('path'); ???module.exports = { ?????entry: './src/index.js', ?????output: { ???????filename: 'bundle.js', ???????path: path.resolve(__dirname, 'dist') ?????} ???}; ???//index.html<!doctype html><html> ?<head> ???<title>demo</title> ?</head> ?<body> ???<script src="./src/index.js"></script> ?</body></html>//index.jsfunction component() { ???var element = document.createElement('div'); ???var node = document.createTextNode("hello,webpack!"); ???element.appendChild(node); ???return element;}document.body.appendChild(component());下载安装包
//production模式npm install --save [+安装包名称]//development模式npm install --save-dev运行项目
以项目脚本为入口起点,输出main.js
npx webpack添加npm脚本到package.json设置一个快捷方式运行本地的webpack
//package.json ?{ ???"name": "webpack-demo", ???"version": "1.0.0", ???"description": "", ???"main": "index.js", ???"scripts": { ?????"test": "echo \"Error: no test specified\" && exit 1",+ ????"build": "webpack" ?//新增 ???}, ???"keywords": [], ???"author": "", ???"license": "ISC", ???"devDependencies": { ?????"webpack": "^4.0.1", ?????"webpack-cli": "^2.0.9", ?????"lodash": "^4.17.5" ???} ?}loader
加载css文件
react默认不支持css文件,所以需要进行转码.
// webpack.config.js ??module: { ????rules: [ ??????{ ????????test: /\.css$/, ????????use: [ ??????????'style-loader', ??????????'css-loader' ????????] ??????} ????] ??}加载图片
???module: { ?????rules: [ ??????{ ????????test: /\.(png|svg|jpg|gif)$/, ????????use: [ ??????????'file-loader' ????????] ??????} ???] ??} ???加载字体
???module: { ?????rules: [ ??????{ ????????test: /\.(woff|woff2|eot|ttf|otf)$/, ????????use: [ ??????????'file-loader' ????????] ??????} ?????] ???}加载数据
???module: { ?????rules: [ ??????{ ????????test: /\.(csv|tsv)$/, ????????use: [ ??????????'csv-loader' ????????] ??????}, ??????{ ????????test: /\.xml$/, ????????use: [ ??????????'xml-loader' ????????] ??????} ?????] ???}全局资源
通过这些方式加载资源,更加直观和可移植
插件的使用
比如使用一个HtmlWebpackPlugin
安装
npm install --save-dev html-webpack-plugin使用
const HtmlWebpackPlugin = require('html-webpack-plugin'); ?module.exports = { ???entry: './src/index.js', ???+ ??plugins: [+ ????new HtmlWebpackPlugin({+ ??????title: 'Output Management'+ ????})+ ??], ???output: { ?????filename: '[name].bundle.js', ?????path: path.resolve(__dirname, 'dist') ???} ?};source map
准确追踪错误和警告
// webpack.config.js ???const path = require('path'); ???module.exports = { ?????entry: './src/index.js',+ ????devtool: 'source-map', ???????????output: { ???????filename: 'bundle.js', ???????path: path.resolve(__dirname, 'dist') ?????} ???};开发工具
帮助你在代码发生变化后自动编译代码
有webpack‘s Watch Mode,webpack-dev-server,webpack-dev-middleware 三种.开发常用webpack-dev-server
安装
npm install --save-dev webpack-dev-server使用
//webpack.config.js ?const path = require('path'); ?module.exports = { ???entry: './src/index.js',+ ??devServer: {+ ????contentBase: './dist'+ ??}, ???output: { ?????filename: 'bundle.js', ?????path: path.resolve(__dirname, 'dist') ???} ?};webpack基本使用教程
原文地址：https://www.cnblogs.com/Lazy-Cat/p/10073453.html