使用Mac本配置Vue

安装webpack需要依赖node环境,下载地址为:https://nodejs.org/en/download/

WechatIMG1303.jpeg

node.js 的安装完成后
node.js 安装好后,就等于你安装好了node 和npm ,下面我们打开终端执行命令查看下：
node -v [查看node版本] 
npm -v[查看npm版本

[图片上传中...(WechatIMG1304.jpeg-eb152b-1606100762422-0)]
[图片上传中...(WechatIMG1305.jpeg-b8fc7a-1606100793117-0)]

WechatIMG1305.jpeg

安装脚手架 https://cli.vuejs.org/zh/guide/installation.html

移除 
npm uninstall -g @vue/cli
安装指定的版本
npm install -g @vue/cli@3.9.3
# OR
yarn global add @vue/cli

vue --version

接口下来就是通过npm安装webpack了
在mac下依赖包要写入系统重要文件夹里，需要先获取root权限（如果不获取root权限会出错,这点非常重要），所以终端先执行如下命令：

$ sudo -s

执行后会出现小钥匙，输入你的密码然后在回车就可以了。

获取完root ，我们开始安装webpack ，执行如下命令：

-g 表示全局安装
npm install webpack -g
-save-dev 局部安装 可以指定版本号进行安装
npm install webpack@4.27.0 --save-dev

1.初始化安装package.json

npm init

2.配置package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  }

3.创建webpack.config.js文件


const path = require('path')

module.exports = {
    entry:'./src/main.js',
    output:{
        path: path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}

4.安装挂载css插件 loaders

npm install --save-dev css-loader
npm install --save-dev style-loader

运行项目

 npm run build
也可以
webpack src/main.js dist/bundle.js

webpack中文技术支持网站点击顶部的中文文档 https://www.webpackjs.com
第三步骤页面配置如图所示:

WechatIMG1306.jpeg

//6.如果安装了less文件需要安装

npm install --save-dev less-loader less
//webpack.config.js配置如下
{
        test: /\.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      }

//7如果加载url('../img/aaa.png')图片的话

npm install --save-dev url-loader
webpack.config.js配置文件
{
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
              // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
              limit: 13000,
              name: 'img/[name].[hash:8].[ext]'
            },
          }
        ]
      }

8.如果图片大于步骤7limit: 13000,的时候需要通过file-loader进行处理

npm install --save-dev file-loader
再次打包，就会发现dist文件夹下多了一个图片文件

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/' //此处声明会将dist里面的图片加载出来否则路径不对
  }

9.如果希望将ES6的语法转成ES5，那么就需要使用babel。
而在webpack中，我们直接使用babel对应的loader就可以了

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

webpack.config.js配置如下

{
        test: /\.js$/,
        // exclude: 排除
        // include: 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }

10.后续是在实际项目中也会使用vue的，所以并不是开发时依赖

npm install vue --save

11.安装vue-loader和vue-template-compiler

npm install vue-loader vue-template-compiler --save-dev

webpack.config.js的配置文件：

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

导入vue配置文件后报错了, 参考了文档地址 https://blog.csdn.net/nightwishh/article/details/92799408
解决办法简单的是把vue-loader回到v14版本

"vue-loader": "^14.0.0",

12.在使用webpack-dev-server 的时候报错了
参考文档如下解决问题了:感谢作者
原因如下:
报错“Cannot find module 'webpack-cli/bin/config-yargs'”-之解决办法
去寻找适合webpack5的webpack-cli和webpack-dev-server，然而情况不是想象的那样，webpack5根本不与现有版本兼容，所以又把注意力转移到webpack4，我们不得不降低webpack版本从5到4，于是有了下面的版本配置，在删除node_modules包，及指定了以下package.json配置后，最初报错指令被成功执行

"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"

13.webpack配置分离

 npm install webpack-merge --save-dev