1 先去node.js官网下载nodejs并且安装

安装成功之后在命令行输入node -v 回车，npm -v回车如果显示对应的版本号，说明node安装成功，自带的npm也安装成功

2 在d盘下创建一个目录比如demo目录

3 在命令行输入d：回车，然后在输入cd demo回车切换到创建的目录下：

4 然后用npm初始化该目录：npm init 回车，完成后会在demo目录下生成一个package.json的文件

5 在本地局部安装webpack

npm install webpack --save-dev

安装成功之后会在package.json文件中多一项配置

  "devDependencies": {

    "webpack": "^4.26.0"

  }

6 接着在本地安装webpack-dev-server 他可以在开发环境中提供很多服务，比如启动一个服务器，热跟新，接口代理等

如果在devDependencies中包含webpack和webpack-dev-server,则表示安装成功

"devDependencies": {
"webpack": "^4.26.0",
"webpack-dev-server": "^3.1.10"
}

7 其实webpack就是一个.js的配置文件

然后在demo目录下创建一个webpack.config.js文件，并初始化他的内容为：

var config = {

};

module.exports = config

8 然后再package.json的scripts里增加一个快速启动webpack-dev-server服务的脚本

9 当运行npm run dev命令时就是执行webpack-dev-server --open --config webpack.config.js命令

--config是指向webpack-dev-server读取的配置文件

--open会在执行命令时自动在浏览器打开页面，默认地址是127.0.0.1:8080，ip和端口都是可以配置的：

10 配置webpack最重要的必选的入口entry和出口output

entry：告诉webpack从哪里寻找依赖，并且编译

output：用来配置编译后的文件存储位置和文件名

在demo目录下新建main.js作为入口的文件，然后再webpack.config.js中进行入口和出口的配置

//

var path=require("path");

var config = {

    entry:{

        //配置的单入口，webpack会从main.js文件开始工作

        main:'./main'

    },

    output:{

        //打包后文件的输出目录

        path:path.join(_dirname,'./dist'),

        //指定资源文件引用的目录

        publicPath:'/dist/',

        //用于指定输出文件的名称

        filename:'main.js'

    }

};

module.exports = config

这里配置的output意思为打包后的文件会存储为demo/dist/main.js

11 在demo目录下新建一个index,html作为我们spa的入口

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>webpack app</title>

</head>

<body>

    <div id="app">

        hello word

    </div>

    <script type="text/javascript" src="/dist/main.js"></script>

</body>

</html>

12 在终端执行下面的命令就会在浏览器中打开index页面

npm run dev

如果运行后报错如下：

那是因为webpack 4以上把命令迁移到webpack-cli上，可以下局部运行如下命令来安装

npm i -D webpack-cli来安装

安装完之后继续运行npm run dev如果有如有如下错误

检查全局变量_dirname的下划线是不是两个__dirname,否则将显示如下页面

至此已经完成了webpack+vue配置的最重要一步了

13 webpack --progress --hide-modules

接下来逐步完善配置文件：

对于不同的模块需要用不同的加载器来处理，而加载器就是webpack最重要的功能，通过安装不同的加载器可以对各种文件后缀名进行处理

比如处理css样式：就要安装style-loader和css-loader,通过npm来安装

npm install css-loader --save-dev

npm install style-loader --save-dev

14 安装完加载器之后再webpack.config.js文件中配置加载器

    module:{

        //再module对象的rules属性可以指定一系列的loeders，每一个loader都必须包含test和use两个选项

        //此配置的意思：

        //当webpack编译过程中遇到require和import语句导入一个后缀名为.css的文件时

        //，先将他通过css-loader转换，再通过style-loader转换，然后继续打包

        rules:[

            {

                test:/\.css$/,

                use:[

                    'style-loader',

                    'css-loader'

                ]

            }

        ]

    }

15 使用webpack的插件plugins

extract-text-webpack-plugin：提取css，生成一个main.css的文件

通过npm安装该插件

npm install extract-text-webpack-plugin --save-dev

16 安装完成后再webpack-config.js中导入插件，并改写loader的配置

var extractTextPlugin=require('extract-text-webpack-plugin');
            {

                test:/\.css$/,

                use:extractTextPlugin.extract({

                    use:'css-loader',

                    fallback:'style-loader'

                })

            }
    plugins:[



        //重命名提取后的css文件

        new extractTextPlugin("main.css")

    ]

17 然后再index页面通过link的方式应用，如果报这种错误

(node:) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

i ｢wds｣: Project is running at http://localhost:8080/

i ｢wds｣: webpack output is served from /dist/

i ｢wdm｣: wait until bundle finished: /dist/main.css

i ｢wdm｣: wait until bundle finished: /dist/main.js

D:\demo\node_modules\webpack\lib\Chunk.js:

                throw new Error(

                ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

    at Chunk.get (D:\demo\node_modules\webpack\lib\Chunk.js::)

    at D:\demo\node_modules\extract-text-webpack-plugin\dist\index.js::

    at Array.forEach (<anonymous>)

    at D:\demo\node_modules\extract-text-webpack-plugin\dist\index.js::

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\demo\node_modules\tapable\lib\HookCodeFactory.js::), <anonymous>::)

    at AsyncSeriesHook.lazyCompileHook (D:\demo\node_modules\tapable\lib\Hook.js::)

说明你用的是webpack 4以上的版本，4以上的版本不支持extract-text-webpack-plugin这个插件

解决办法：mini-css-extract-plugin这个插件代替，安装

18 使用webpack构建vue项目时可以使用一种新的构建模式.vue单文件组件

.vue单文件组件：一个后缀名为.vue的文件，在webpack中使用vue-loader就可以对这种文件进行处理：一个.vue文件包含三部分tempale，script，style

按照如下所示顺序安装来使用.vue文件

npm install --save vue

npm install --save-dev vue-loader

npm install --save-dev vue-style-loader

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

npm install --save-dev vue-hot-reload-api

npm install --save-dev babel

npm install --save-dev babel-loader

npm install --save-dev babel-core

npm install --save-dev babel-plugin-transform-runtime

npm install --save-dev babel-preset-es2015

npm install --save-dev babel-runtime

19 安装完成后修改webpack.config.js来支持vue文件和ES6的解析

            {

                test:/\.css$/,

                use:[

                        {

                            loader:extractTextPlugin.loader,

                            options:{

                            }

                        },

                        'css-loader'

                    ]

            },

            {

                test:'/\.js$/',

                loader:'babel-loader',

                exclude:/node_modules/

            },

            {

                test:'/\.vue$/',

                loader:'vue-loader',

            }

20 在demo目录下新建一个名为.babelrc的文件，并写入babel的配置，webpack会依赖此配置文件来使用babel编译es6代码

{

    "presets":["es2015"],

    "plugins":["transform-runtime"],

    "commments":false

}

21 配置好这些就可以使用vue文件了

1 使用webpack搭建vue开发环境的更多相关文章

  1. 使用vue-cli+webpack搭建vue开发环境

    在这里我真的很开心,好久没有用过博客,今天突然看到了我的博客有不少人看过,虽然没有留下脚印,但是还是激起了我重新拿起博客的信心,感谢大家. 在这里我们需要首先下载node,因为我们要用到npm包下载, ...

  2. 使用webpack搭建vue开发环境

    最近几天项目上使用了vue.js作为一个主要的开发框架,并且为了发布的方便搭配了webpack一起使用.CSS框架使用的是vue-strap(vue 对bootstrap控件做了封装)这篇文章主要总结 ...

  3. 从零开始使用 Webpack 搭建 Vue 开发环境

    创建项目 先创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目(无法执行 npm 命令?需要先安装 Node),这个过程会提示输入一些内容,随意输入就行,完成后会自动生成一个 ...

  4. 基于 Webpack 4 搭建 Vue 开发环境

    自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...

  5. 初探webpack之从零搭建Vue开发环境

    初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...

  6. 【原创】windows下搭建vue开发环境+IIS部署

    [原创]win10下搭建vue开发环境  如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安 ...

  7. windows下搭建vue开发环境+IIS部署

    原创]win10下搭建vue开发环境  https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...

  8. 十分钟上手-搭建vue开发环境（新手教程）

    想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建 ...

  9. 1.WIN10下搭建vue开发环境

    WIN10下搭建vue开发环境 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. ...

随机推荐

  1. 005-tomcat日志体系

    一.概述 首先了解java的日志体系 在JDK1.4后,sun公司增加了一个包为java.util.logging,简称为jul,用以对抗log4j. 后续还有很多日志门面方案,但是tomcat使用了 ...

  2. 复制粘贴引发的鸠占鹊巢——IDEA复制项目导致sources root复用了另一个项目

    复制粘贴大法一向是程序猿的利器,但有时也会引发一些拎不清的麻烦关系来.比如我们现在想新建一个项目,为了快速而对原来的uis-gateway动用了复制粘贴大法,然后改改项目名就成了uis-applica ...

  3. c语言面试宝典（经典，超详细）

    c语言面试宝典(经典,超详细) 2018年08月25日 09:32:19 chengxuyuan997 阅读数:7799   摘自:https://blog.csdn.net/chengxuyuan9 ...

  4. Qt编写控件属性设计器8-网络采集

    一.前言 上一篇文章已经打通了数据源之一的串口采集,这次要说的是网络采集,网络通信目前用的最多的是三种,TCP/UDP/HTTP,其中tcp通信又包括了客户端服务端两种,tcp通信才用了多次握手机制不 ...

  5. markdown 测试博客发布

    这是一个测试页面 无序列表 tet test 有序列表 特使团 tetst 引用 This is a test 插入图片 插入链接 baidu 粗体 这是粗体 斜体 这是斜体 表格 IP VIP 备注 ...

  6. 国内强大的API接口文档写作网站showdoc

    传送门:https://www.showdoc.cc/ 思思今天使用了一下,真是非常方便,瞬间爱上呀,哈哈. 赶紧去试试吧...

  7. IIS添加对ashx文件的支持

    IIS添加对ashx文件的支持 第一步:每个网站都有个“处理程序映射”,用于添加对各种文件的处理程序 第二步:进入“处理程序映射",可以看到对各种文件的处理程序列表,其中就有对ashx文件的 ...

  8. 未能加载文件或程序集“System.Web.Extensions, Version=1.0.61025.0, Culture=neutral

    近日将电脑重装了一下,刚刚装上vs2005后打开以前的一个项目,居然出现了下面的错误: 未能加载文件或程序集“System.Web.Extensions.Design, Version=1.0.610 ...

  9. Python3之切片及内置切片函数slice

       切片   取一个list或tuple的部分元素是非常常见的操作.比如,一个list L=[0,1,2,3,4,5,6,7,8,9] 取前3个元素,应该怎么做 笨方法,一个个列出来 >> ...

  10. kafka连接报错kafka.errors.NoBrokersAvailable： NoBrokersAvailable

    问题: 本地windows系统远程连接kafka报错,kafka.errors.NoBrokersAvailable: NoBrokersAvailable. 解决: 在网上看到说是hosts文件需要 ...