webpack搭建Vue

目录

• 配置webpack.config.js
• npm初始化
• 安装局部webpack
• 配置npm run build映射webpack
• 安装需要的loader

配置webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

npm初始化

加载项目需要的npm

生成package.json

npm init 

安装局部webpack

避免版本冲突

生成package-lock.json

npm install webpack@3.6.0 

配置npm run build映射webpack

终端输入npm run build执行打包操作 优先会使用局部webpack 避免版本冲突

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

安装需要的loader

https://www.webpackjs.com/loaders 找对应的npm

npm install css-loader@2.0.2 --save-dev
npm install style-loader@0.23.1 --save-dev
npm install --save-dev less-loader@4.1.0 less@3.9.0
npm install --save-dev url-loader@1.1.2
npm i file-loader@3.0.0 -D
npm install --save-dev babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1
npm install vue@2.5.21 --save

//webpack.config.js
const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    module: {
        rules: [{
                test: /.css$/,
                use: ['style-loader', 'css-loader']
                //[]按照从后往前的顺序执行
                //css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
                //style-loader 将模块的导出作为样式添加到 DOM 中
            }, {
                test: /.less$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader" // less-loader 加载和转译 LESS 文件
                }]
            }, {
                test: /.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader', //像 file loader 一样工作，但如果文件小于限制，可以返回 data URL
                    options: {
                        // limit: 8192
                        limit: 30000, // 图片小于limit，会将图片编译成base64字符串形式。大于limit 需要npm file-loader
                        name: 'img/[name].[hash:8].[ext]' //配置生成的图片名称
                    }
                }]
            },
            // {
            //     test: /.(png|jpg|gif)$/,
            //     use: [{
            //         loader: 'file-loader',//将文件发送到输出文件夹，并返回（相对）URL
            //         options: {
            //             name: 'img/[name].[hash:8].[ext]' //配置生成的图片名称
            //         }
            //     }]
            // },
            {
                test: /.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader', //babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5
                    options: {
                        // presets: ['@babel/preset-env']
                        presets: ['es2015']
                    }
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
            //vue默认使用runtime-only [node_modulesvuedistvue.runtime.js] build,不能编译template。
            //需要显示指定使用runtime-compiler [node_modulesvuedistvue.esm.js] build
            //main.js=> import Vue from 'vue' (小写和alias对应)
            //'vue$': 'vue/dist/vue.js'
        }
    }
}

//package.json
{
  "name": "webpack1",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.5.21",
    "webpack": "^3.6.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^2.0.2",
    "file-loader": "^3.0.1",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2"
  }
}