vue2 使用webpack手动创建项目结构

使用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'
    ]
  }
}

js

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()]
}

安装vue vue-router

npm install vue vue-router -S