webpack打卡

QuinnMiao
106 阅读2分钟

任务目标：使用webpack来仿照一个简单的vue脚手架开发一个单页面项目demo。

1、创建项目目录，初始化项目环境
  1. 选定一个项目路径地址，作为此demo的项目路径
  2. 终端执行 npm init 初始项目
  3. 安装webpacknpm install --save-dev webpack npm install --save-dev webpack-cli
  4. 在目录下创建public文件夹，src文件夹以及webpack.config.js文件。public文件夹下创建index.html文件，src文件夹下创建main.js文件，作为项目的入口文件，项目目录如下图

1661764441251.png

2、webpack配置入口、出口文件路径

1.在webpack.config.js文件中配置入口出口。

module.exports = {
  entry: './src/main.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
};

2.index.html文件中写入html标签内容

<!doctype html>
<html>
  <head>
    <title>webpack练习</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <div id="app">Hello webpack</div>
  </body>
</html>
  1. 安装HtmlWebpackPlugin插件，并在webpack中引用。 注：带有加号的表示相比前面步骤添加的内容
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/main.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
 + plugins: [
 +   new HtmlWebpackPlugin({
 +         title: 'Output Management',
          //设定html模板
 +         template: './public/index.html'
 +     })
 +   ],
};
  1. 打开终端执行npx webpack 此时在项目目录下会生成dist文件夹，下面的文件就是webpack执行后生成的打包文件。通过浏览器运行dist文件夹下的内容发现界面就是在public文件夹下index.html文件的内容。
3、仿脚手架，使用vue构建单页面应用

主要思路是：创建一个APP.vue组件，在main.js中创建vue应用实例，并APP.vue挂在index.html的根元素下，之后通过渲染其他路由组件。

  1. 安装vue，终端执行命令npm install vue
  2. src文件夹下创建App.vue,并写入内容。
  3. 在main.js文件中创建vue实例，将App.vue组件挂在index.html页面根元素下。
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

4.安装 vue-loader,npm install vue-loader
5.安装vue-template-compiler,npm install vue-template-compiler
6.在webpack.config.js中引用两个插件

const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  entry: './src/main.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
+    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
          title: 'Output Management',
          template: './public/index.html'
       })
     ],
+     module: {
+     rules: [
+       {
+         test: /\.vue$/,
+         use: [
+           { loader: 'vue-loader' },
+         ]
+       },
+     ]
+   },
};
  1. 执行npx webpack,通过浏览器运行dist文件夹下的index.html文件，发现浏览器显示内容为App.vue中的内容。
开发模式插件

为了避免在开发过程中每次都执行打包功能，使用webpack-dev-server进行用于开发，可以实现在更新页面内容时自动更新浏览器的内容。

  1. 安装webpack-dev-server，终端执行npm install --save-dev webpack-dev-server 2.在webpack.config.js中配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  entry: './src/main.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
          title: 'Output Management',
          template: './public/index.html'
       })
     ],
     module: {
      rules: [
        {
          test: /\.vue$/,
          use: [
            { loader: 'vue-loader' },
          ]
        },
      ]
    },
   +  devServer: {
   +  static: './dist'
   +  },
    mode:'development'
};
  1. 在package.json中添加脚本命令 "start": "webpack-dev-server --open",
    至此可以可以通过进行开发，终端执行npm start，保存后浏览器内容会自动更新，不需要每次都执行npx webpack打包。
avatar
文章
阅读
粉丝