webpack基础
1.项目搭建、依赖模块安装、package.json配置
安装
mkdir webpack-demo && cd webpack-demo
npm init -ynpm init -y会在当前目录下生成webpack初始化package.json内容如下：
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC"
}安装webpack模块和lodash模块
npm install --save package
npm install --save lodash安装成功后会在当前目录生成node_modules文件夹，存储依赖模块代码，另外可通过./node_modules/.bin/webpack来执行webpack
lodash是一个基础类库，提供各种数据类型的处理工具类。
创建测试代码：
dist
--index.html
src
--index.js编辑测试代码：
//index.js
import _ from 'lodash'
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
//index.html
<html>
<head>
<title>Getting Started</title>
</head>
<body>
// <script src="./src/index.js"></script>
<script src="bundle.js"></script>
// 后面我们会通过webpack将index.js打成bundle.js
</body>
</html>执行./node_modules/.bin/webpack src/index.js dist/bundle.js
也可通过配置文件启动webpack，在跟目录创建webpack.config.js，内容如下：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
// 执行./node_modules/.bin/webpack --config webpack.config.js也可在package.json添加如下代码：
"scripts": {
"build": "webpack"
"build": "webpack --config webpack.config.js"
}
// 执行：npm run build
// npm run build会在根目录寻找webpack.config.js(经过测试是这样的！)
// 也可通过第二种指定配置文件2.资源管理为我们项目添加加载模块
- css加载器
npm install --save-dev style-loader css-loader xml-loader // 安装模块到dev 在webpack.config.js添加以下配置项
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}
]
}- 在index.js中可以通过import的方式引入文件
import _ from 'lodash';
import './style.css';
import Icon from './icon.png';
import Data from './data.xml';
function component() {
var element = document.createElement('div');
// Lodash，现在通过 script 标签导入
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
// 将图像添加到我们已有的 div 中。
var myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
// data.xml --> <name>lllin</name>
console.log(Data); // Data.name = 'lllin'
return element;
}
document.body.appendChild(component());3.打包多个模块
我们在index.js同级目录创建另一个print.js文件，然后打包两个文件。
修改webpack.config.js配置项：
entry: {
index: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
// [name]的值为index/print
// npm run build会生成两个文件：index.bundle.js、print.bundle.js按照前面我们需要在index.html手动引入这两个文件，但在实际项目中我们不知道最终会生成哪些js，所以这种方法是不可取的。htmlwebpackplugin插件，会帮助我们动态引入生成的js到html文件中。安装过程略过，使用方法在webpack.config.js中添加配置：
// 引入html-webpack-plugin模块
const htmlwebpackplugin = require('html-webpack-plugin')
// 添加配置项plugins
plugins: [
new htmlwebpackplugin({
title: 'output management'
})
],如果这次打了三个js文件a.js b.js c.js，而下次只打出来了a.js b.js，这两个文件会同名覆盖，但c.js会仍然存在，我们可以引入插件clean-webpack-plugin,在每次打包时先删除dist文件下的所有文件。
const CleanWebpackPlugin = require('clean-webpack-plugin')
plugins: [
new CleanWebpackPlugin(['dist'])
]4.代码反向映射、观察者模式
在webpack打包后的程序，如果运行过程中js报错，定位错误位置时看到的是混淆过的代码，我们可以在webpack.config.js添加以下配置项，当我们点击错误信息时就可以反向映射到我们的源码，当然在生产版本中是不允许的。
devtool: 'inline-source-map'目前我们每次修改代码后需要重新执行npm run build，我们可以通过观察者模式启动我们的项目：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch"
},
// 当通过webpack --watch即npm run watch启动时，webapck会实时监听代码变化更新到dist文件夹下对应的文件中此时我们已经可以不用反复执行npm run build，但会发现每次修改代码必须刷新浏览器更新的代码才能生效，我们可以引入另一个插件webpack-dev-server,安装过程略。在webpack.config.js添加以下配置，无需引入模块。
devServer: {
contentBase: './dist'
}在package.json script添加启动方式：
"start": "webpack-dev-server --open"npm run start即可。
webpack-dev-middleware是webpack-dev-server的一部分，可以单独提取出来并配合express使用，相比webpack-dev-server可以更灵活。
安装
npm install --save-dev express webpack-dev-middleware新增server.js文件
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath // 在webpack.config.js的outupt新增publicPath: '/'
}));
// Serve the files on port 3000.
app.listen(3000, function () {
console.log('Example app listening on port 3000!\n');
});在package.json的script新增启动方式"server": "node server.js"
通过npm run server即可。
<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">
