webpack4打包实践
全局安装webpack
npm install -g webpack
创建项目
mkdir webpack-test
cd webpack-test
npm init
npm init后会在根目录下生成一个名为package.json的文件，文件中srcipts字段设置如下：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
这样就可以直接使用命令npm run build来进行文件打包
项目内安装webpack
（注意切换镜像源）
cnpm install -D webpack-cli
安装需要的依赖
cnpm install --save-dev webpack css-loader style-loader url-loader babel babel-core babel-loader babel-preset-es2015 html-webpack-plugin
配置babel
根目录下新建.bablerc文件写入如下内容：
{"presets":["es2015"]}
新建webpack.config.js
在根目录下新建webpack.config.js文件，写入如下内容：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const config = {
module: {
rules: [
//将相互依赖的模块打包到一个文件
{test: /\.css$/, loader: ['style-loader', 'css-loader']},
{test: /\.js$/, loader: 'babel-loader'}
]
},
plugins: [
//dist中创建index.html文件并自动引用相关的文件(如 css, js)
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
这里使用webpack4默认的入口和出口，所以并没有设置entry、output
创建测试文件
根目录下新建src文件夹,并创建如下文件：
index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div class="test"></div>
</body>
</html>
创建css文件夹并新建index.css文件：
.test{margin: 0 auto;width: 100px;height: 100px;background: #ff6700}
创建index.js文件引入index.css:
require('../src/css/index.css');
console.log('text')
执行打包
执行npm run build即可在根目录下生成dist打包目录,目录包含index.html main.js两个文件
