webpack4配置vue脚手架

目录

项目准备

1.建立文件

mkdir webpack-vue && cd webpack-vue
复制代码

2.初始化文件

1.主要建立package.json
npm init 
复制代码

3.建立业务目录

4.建立配置文件

1.webpack.config.js
touch webpack.config.js
复制代码

5.文件配置

• entry:入口起点
• module:配置loader
• plugins:提供插件
• output:输出文件
• resolve:配置模块如何解析
• devtool:以及如何生成 source map
• devServer:开启服务

6.安装依赖包

npm install --save-dev webpack-dev-server
npm i html-loader vue-loader node-sass style-loader css-loader sass-loader -D
npm i vue vue-router
npm i webpack webpack-cli -D
npm i html-webpack-plugin clean-webpack-plugin
npm i vue-template-compiler -D
npm i vue-style-loader -D
复制代码

项目总结：

1.webpack webpack-cli必须同时安装

2.配置sass环境时，必须安装node-sass

3.取消loaders配置

改为：
rules:[{
    test:/\.html$/,
    loader:'html-loader'
},...]
复制代码

4.vue-loader加载不上

解决方式:
const VueLoaderPlugin = require('vue-loader/lib/plugin');
复制代码

5.报这样的错误信息

vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in )

解决方法配置
 resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
        }
    },
复制代码

webpack.config.js配置文件

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './app/js/main.js',
    },
    devServer: {
       contentBase: path.join(__dirname, 'dist'),
       compress: true,
       port: 9000
    },
    module: {
        rules:[
            {
                test:/\.html$/,
                loader:'html-loader'
            },
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            {   test: /\.css$/,
                use: [
                    "vue-style-loader", 
                    "css-loader"
                ]  
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // 将 JS 字符串生成为 style 节点
                }, {
                    loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
                }, {
                    loader: "sass-loader" // 将 Sass 编译成 CSS
                }]
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './app/views/index.html'
        })
    ],
    resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
        }
    },
    output:{
         filename: '[name].min.js',
         path: path.resolve(__dirname, 'dist')
    }
}

复制代码

项目连接

github.com/chenlin1/we…

项目总结

一面
1.作过哪些项目？
2.为何用Vue框架？
3.在项目中的角色是什么？解决过哪些难题？
4.经过这个项目学到了什么?
二面
1.项目要怎么准备？
2.项目该怎么介绍？
3.沟通有哪些技巧？
4.项目该怎么介绍？
项目背景-》项目收益-》项目设计-》项目总结
三面实战
1.为何选择vue框架？
2.vue的双向绑定是如何实现的？
3.有木有使用CSS Module,基本原理是什么，Vue该如何作？
4.开启CSS Module以后如何使用第三方样式库？
5.vue的安装包有几个版本，遇到问题如何解决的？
6.你的项目有什么特点，解决过什么问题，用了什么技术方案？
7.为何选择webpack构建工具？
8.项目是如何使用webpack的?dev-server的原理是什么？
9.有木有实现一个webpack的loader?
10.如何作任务管理的？
11.自适应方案应该怎么作，原理是什么，
12.rem和em的区别？
13.先后端分离是如何作的？
14.前端的路由是什么原理？
复制代码