零基础搭使用webpack脚手架搭建前端页面

最新推荐文章于 2024-05-18 22:08:03 发布

VIP文章洛岑

最新推荐文章于 2024-05-18 22:08:03 发布

阅读量77

点赞数

文章标签：前端 webpack javascript

本文链接：https://blog.csdn.net/qq_41967129/article/details/130748737

版权

使用webpack搭建前端项目

Step1 先生成一个package.json，安装webpack脚手架

1、新建一个项目，先安装。运行下面两条指令

npm init -y
npm i -D webpack webpack-cli typescript ts-loader

2、接着配置webpack环境，新建webpack.config.js配置文件，内容如下：
entry是入口文件的相对地址；module里会给各种文件配置规则，比如我们先配一个ts文件的规则，使用的是ts-loader的依赖；output是打包之后生成文件的位置，在dist文件下。

//webpack.config.js
const path = require('path');

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

3、添加tsconfig.json文件并新增配置

{
   
    "compilerOptions": {
   
    	"jsx": "react",
        "target": "ES2015",
        "module": "ES2015",
        "strict": true
    }
}

4、配置package.json
在scripts选项中添加

  "scripts": {
   
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1",
  },

5、以上配置完成，在index.tsx中输入代码:

const str: string = 'hello, world';
console.log(`name: ${
     str}`);

6、控制台输入npm run build，可以看到项目目录中生成了dist目录，里边有一个打包后的文件bundle.js。

Step2 引入HTML

1、引入HTMLWebpackPlugin插件

npm i -D html-webpack-plugin

html-wepback-plugin插件会自动在打包时生成一个html文档，并自动引入打包之后的bundle.js文件
2、配置webpack

	plugins: [
	    new HTMLWebpackPlugin()
	]

编译，dist目录下生成了index.html文件。

3、自定义html文件
在src文件下面新建public文件夹，新建index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="

最低0.47元/天解锁文章

洛岑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
零基础搭使用webpack脚手架搭建前端页面

文本完成了初始化webpack，项目中新增webpack配置文件，与webpack相关的配置信息都放在这个文件中，同时配置了等选项。entry指明入口文件module设置相关loader;typescript相关的loader在此处配置;output为打包输出配置，比如设置输出路径、输出文件名等。安装typescript相关loader，并添加到webpack配置文件中；同时添加typescript配置文件，并在其中添加设置等选项；配置插件，该插件会在打包时自动生成一个html。
复制链接

扫一扫