webpack打包前端Vue

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。需要安装

npm install webpack -g
npm install webpack-cli -g

在项目根目录下创建 webpack.config.js 配置文件

本项目打包所需配置

var path=require('path')
module.exports={
  entry: path.join(__dirname, 'src/main.js'), // 入口文件
  output: { // 指定输出选项
    path: path.join(__dirname, './dist'), // 输出路径
    filename: 'bundle.js' // 指定输出文件的名称
  },
  #模块打包时的处理
  module:{
    rules:[
      {test: /\.css|.scss$/,use: [ 'style-loader', 'css-loader']},
      { test: /\.vue$/, use: 'vue-loader' },
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
      {test: /.vue$/,loader: 'vue-loader'},
      {test: /.(png|jpe|icon|svg|woff|tff|.gif)/,use: ['url-loader']}
    ]
  },
  resolve:{
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['.js', '.jsx', '.css']
  }
}

错误一：

router文件中不能使用此方式导入vue文件

改用import，导入vue文件必须加上.vue后缀

错误二：

不能处理.gif文件。这是因为我们没有配置相应的处理器

需要在打包配置中配置各种后缀文件的处理器，加上.gif

打包成功！

注意：经webpack打包后原来代码中配置的路径可能会出现找不到的问题，具体细节通过看错误提示慢慢能够解决

打包成功后，会在根目录下生成一个disk目录

在控制台运行命令：

npm run build 

执行bundle.js文件

dist目录下会生成完整的打包后的项目，我们把dist目录部署到服务器上即可