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

vue2 使用webpack手动创建项目结构,第1张

使用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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/940240.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-17
下一篇 2022-05-17

发表评论

登录后才能评论

评论列表(0条)

保存