webpack项目创建步骤
2020-08-14 本文已影响0人
青乌
本文介绍初步使用webpack的基本步骤，了解更多查看阮一峰老师的深入浅出webpack，这本书是基于webpack3书写的，目前已应用至webpack4，大部分内容还是相同的。
第一步：通过npm init创建package.json文件
npm init
第二步：生成node_modules文件
npm -y
第三步：安装相关依赖
webpack：包含将代码捆绑到开发和生产版本的核心。
webpack-cli：用来运行 webpack 的命令行工具。
webpack-dev-server：一个 HTML 服务器，它将在开发阶段加载我们的代码并提供 HMR 功能。
webpack-merge：一个 webpack 工具库，允许将 webpack 配置拆分为多个文件。
ts-loader：处理 TypeScript 文件的模块规则。
npm install webpack webpack-cli webpack-dev-server webpack-merge ts-loader css-loader style-loader url-loader --save-dev
//如果使用ts
npm install -g typescript
tsc --init
install可简写为i,--global可简写为-g,--save-dev可简写为-D,--save可简写为-S
第四步：完成如下结构
目录结构：
目录结构
index.html包含内容：
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack Example</title>
</head>
<body>
<div id='root'></div>
<script src="bundle.js"></script> <!--这是打包之后的js文件，我们命名为bundle.js-->
</body>
</html>
hello.js内容如下：
// hello.js
module.exports = function() {
let hello = document.createElement('div');
hello.innerHTML = "Hello World!";
return hello;
};
index.js内容如下：
//index.js
//引入hello.js
const hello = require('./hello.js');
document.querySelector("#root").appendChild(hello());
新建webpack.config.js，内容如下：
// webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.ts',//入口文件
module: {
rules: [{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
}, {
test: /\.css?$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}]
}, {
test: /\.(png|jpg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192, //对图片的大小做限制，8kb
name: 'img/[name].[hash:8].[ext]'
},
}]
}],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',//输出文件
path: path.resolve(__dirname, '../dist'),//输出路径
},
}
webpack.dev.js
const { merge } = require('webpack-merge')
const common = require('./webpack.config.js')
const path = require('path');
module.exports = merge(common, {
mode: 'development',
devtool: 'eval-source-map',
devServer: {
static: {
directory: path.join(__dirname, '../dist'),
},
hot: true,
},
})
上述就相当于把src文件夹下的index.js文件打包到dist文件下的bundle.js，这时就生成了bundle.js供index.html文件引用。
然后在package.json中配置scripts：
"scripts": {
"dev": "webpack serve --config ./src/webpack.dev.js"
}
编译：npm build 运行：npm run dev
