vue2 使用webpack手动创建项目结构_vue2 node-polyfill-webpack-plugin-优快云博客

本文链接：https://blog.youkuaiyun.com/M_linear/article/details/124738407

这篇博客详细介绍了如何从零开始手动创建一个Webpack项目，包括初始化npm配置，安装和配置Webpack及Webpack CLI，设置打包入口和出口，启用Webpack Dev Server实现自动打包功能。进一步，博主讲解了如何配置html-webpack-plugin生成预览页面，以及如何为CSS、LESS、SASS、图片、JS等资源配置相应的loader。此外，还涉及到了Vue.js的集成以及Vue Router的安装，最后提到了Babel和Vue Loader的配置，确保项目对不同浏览器的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用webpack手动创建项目结构

初始化包管理配置文件

npm init -y

在项目中安装 webpack webpack-cli

npm install webpack webpack-cli -D

配置打包的入口与出口

const path = require('path')
module.exports = {
  mode:'development',
  entry:path.join(__dirname,'./src/main.js'),
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'bundle.js'
  }
}

配置webpack的自动打包功能

npm install webpack-dev-server -D`

配置html-webpack-plugin生成预览页面

npm install html-webpack-plugin -D`

const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
  template:'./index.html',
  filename:'index.html'
})
module.exports = {
  plugins:[htmlPlugin]
}

配置loader

css

npm install style-loader css-loader -D

module.exports = {
  module:{
    rules:[
      {test:/\.css$/,use:['style-loader','css-loader']}
    ]
  }
}

less

npm install less-loader less -D

module.exports = {
  module:{
    rules:[
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
    ]
  }
}

sass

npm install sass-loader node-sass -D

module.exports = {
  module:{
    rules:[
      {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
    ]
  }
}

postcss(兼容)

npm install postcss-loader autoprefixer@8.0.0 -D

const autoprefixer = require('autoprefixer')
module.exports = {
  plugins:[autoprefixer],
  module:{
    rules:[
      {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
    ]
  }
}

url

npm install url-loader file-loader -D

module.exports = {
  module:{
    rules:[
      {test:/\.jpg|jpeg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=20000'
    ]
  }
}

npm install babel-loader @babel/core @babel/runtime -D
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

//  新建 babel.config.js
module.exports = {
  presets:['@babel/preset-env'],
  plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}
//  在 webpack.config.js 中添加
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

vue

npm install vue-loader vue-template-compiler -D

//  webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  module:{
    rules:[
      {test:/\.vue$/,loader:'vue-loader'}
    ]
  },
  plugins:[new VueLoaderPlugin()]
}