webpack+vue搭建

最新推荐文章于 2024-09-14 10:29:57 发布

zarck83

最新推荐文章于 2024-09-14 10:29:57 发布

阅读量451

点赞数

文章标签： vue webapck

本文链接：https://blog.csdn.net/zarck83/article/details/81218791

版权

1、前提：安装node，npm，全局安装webpack

2、执行npm install -g cnpm --registry=https://registry.npm.taobao.org，之后用cnpm安装，从淘宝服务器下载组件

3、执行npm init -y ,创建package.json

4、安装组件，执行

Cnpm install --save-dev webpack webpack-dev-server babel-core babel-loader vue vue-loader@14.2.3 vue-html-loader vue-template-compiler css-loader

webpack当前版本4.16.5

Tips:vue-loader版本问题比较多，用了14.0,3会报错，默认安装最新版本15也会报错，需要额外添加配置

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
// ...
plugins: [
new VueLoaderPlugin()
]
}

我这里用了14.2.3，不用添加配置，直接可以使用

5、添加文件

根目录下新建webpack.config.js

//webpack.config.js

const webpack = require('webpack');

module.exports = {

  entry:  __dirname + "/src/main.js",//唯一入口文件

  output: {

    path: __dirname + "/dist",//打包后的文件存放的地方

    filename: "bundle.js"//打包后输出文件的文件名

  },

  devServer: {

    contentBase: "./",//本地服务器所加载的页面所在的目录

    historyApiFallback: true,//不跳转

    inline: true//实时刷新

  },

  module: {

        rules: [

            //解析vue后缀文件

            {test: /\.vue$/, loader: 'vue-loader'},

            //用babel解析js文件 排除模块安装目录的文件

            {test: /\.js$/, loader: 'babel-loader',exclude: /node_modules/}

        ]

    }

}

根目录下新建index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Demo</title>

</head>

<body>

  <div id="app"></div> 

  <script src="dist/bundle.js"></script>

</body>

</html>

根目录下新建文件夹src，存放main.js和vue组件

//Main.js

import Vue from 'vue';

import App from './App.vue';



new Vue({

  el:'#app',

  components: {App},

  render: h => h(App),

  mounted:function(){console.log(‘hello world’)}

})

//App.vue

<template>

   <div>hello world!!</div>  

</template>

<script>

  export default{

     name:"app"

  }

</script>

根目录下新建文件夹dist，存放编译好的js文件

执行webpack命令，查看dist目录下是否生成了bundle.js

更改操作命令，package.json的scripts选项添加

"start": "webpack",

"server": "webpack-dev-server --open --mode development"

Tips:start这个命令比较特殊，npm start就能执行，其他命令都需要npm run +具体命令才能执行，例如npm run server启动服务器,具体改成什么命令看个人喜好了

6、输入npm run server启动服务器，至此webpack基本功能已经实现。

修改main.js和vue文件，保存，发现服务器并没有热更新，查了下vue-loader已经集成这个功能，只需要webpack.config.js的output添加

publicPath: 'dist/'

，检测这个目录有变化就自动更新显示

loader种类还有很多，根据项目实际需要添加，例如sass-loader,less-loader,url-loader,file-loader,json-loader

抄了一句对loader的描述。Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。