02-通过webpack搭建一个基础的项目

基础搭建

  1. 新建一个空的文件夹。(项目文件夹)

  2. 在项目项目文件夹下使用 npm init - y 初始化项目,生成package.json。

  3. 安装webpack及webpack-cli:npm i webpack webpack-cli

  4. 创建项目模板。项目文件夹下新建public文件夹,并在文件夹下新建一个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">
      <title>webpacktitle>
    head>
    <body>
      <div id="app">div>
    body>
    html>
    
  5. 创建项目文件夹下创建src文件夹用来存放项目的逻辑代码,并在src文件夹下新建index.js作为项目的入口。

const app = document.querySelector('#app');
app.innerHTML = 'hello webpack'
  1. 编写webpack配置文件:webpack.coonfig.js。

    const { resolve } = require('path')
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: resolve(__dirname, './dist')
      }
    }
    
  2. 在package.json文件中编写脚本:“build”:“webpack”

  3. 经过上述的操作,我们就可以通过npm run build对项目进行打包,并在dist文件夹下可以看到打包后的代码。css配置及服务的启动在下面进行讲解。

使用html-webpack-plugin

在打包之后还需要手动的进行打包后文件的引入,这样很不方便。此时我们可以使用插件来帮我们完成这个工作。使用npm i html-webpack-plugin进行安装。在webpack.config.js中加入下面的代码。

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
        template: './public/index.html'
    })
]

经过上述操作,我们进行打包就可以看到dist文件夹下帮除了帮我们生成bundle.js之后,还生成了index.html文件,此时我们通过浏览器打开生成后的html就可以看到效果了。

使用webpack-dev-server为我们提供一个前端服务

在经过上述操作之后我们的项目还是需要通过open live server来打开html,此时我们可以通过webpack-dev-server来提供服务。

使用:

  1. 安装webpack-dev-server:npm i webpack-dev-server -D

  2. 在package.json中配置脚本。

    "serve":"webpack-dev-server"
    
  3. 修改webpack.config.js添加mode

    mode: 'development'
    

经过上述操作,就可以通过npm run serve将项目运行在本地服务。通过浏览器输入服务地址就能看到效果了。

你可能感兴趣的:(webpack,webpack,前端,node.js)