webpack项目基础配置教程

Vue+webpack项目根底配置教程,vuewebpack

前天在就学webpack,跟着课程一个单页面应用,在此边记录一下。那个片段重视讲了什么样布置webpack的境遇,以至webpack
dev的配置。

笔录比较轻易,后续会更新。

1.付出条件:vscode,node.js,vue.js,webpack

大家温馨设置一下node.js能够参见生手教程

使用的IDE是 VScode

2.体系伊始化

快捷键ctrl+` 打开vscode控制台

官方澳门新永利下载 1 

vscode界面

2.1安装webpack vue vue-loader

npm init
npm i webpack vue vue-loader

npm 现身warn提示你须要依赖,遵照提醒实行设置

官方澳门新永利下载 2 

warn

设置相应的loader

npm i css-loader vue-template-compiler

2.2布置webpack能够加载app.vue文件

首先成立src文件夹,并在其下开创app.vue最为主代码文件,index.js作为入口文件。

官方澳门新永利下载 3 

底工文件

app.vue文件内容如下:

<template>
 <div id="text">{{text}}</div>
</template>
<script>
 export default{
 data(){
  return {
  text: 'abc'
  }
 }
 }
</script>
<style>
 #test{
 color: red;
 }
</style>

在src同级目录下

创造webpack.config.js文件,配置入口entry,输出output

官方澳门新永利下载 4 

创建package.json文件和webpack.config.js文件

//webpack.config.js
const path = require('path')
module.exports = {
 entry: path.join(__dirname,'src/index.js'), //调用Index.js作为入口文件
 output: { //打包完的js文件会在bundle.js中,这个文件待会会自动生成的
 filename: 'bundle.js', 
 path: path.join(__dirname,'dist') //用来存放bundle.js文件的地址,自己定义
 },
 module: {
 rules: [{
  test: /.vue$/,
  loader: 'vue-loader'
 }]
 }
}

index.js文件作为入口

//index.js
import Vue from 'vue'
import App from './app.vue'
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
 render: (h) => h(App)
}).$mount(root)

配备package.json文件中的scripts命令,增加build

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

在决定台输入npm run build 命令实行李包裹装,打包成功后如图

官方澳门新永利下载 5 

webpack打包完毕后

2.3构造webpack能够加载非Js文件

webpack.config.js文件具体配置

在webpack.config.js中的module:
{}模块中增加rules:[],能够安装webpack需要识别的文件类型,此前曾经安装了vue文件类型,好内需增添css/图片。

//webpack.config.js 
module: {
 rules: [
 {
 test: /.vue$/,
 loader: 'vue-loader'
 },
 {
 test: /.css$/,
 use:[
 'style-loader',
 'css-loader'
 ]
 },
 {
 test: /.(gif|jpg|png|svg)$/,
 use: [{
  loader: 'url-loader',
  options: {
  limit: 1024,
  name:'[name].[ext]'
  }
 }]
 }
] 
}

在调控台实行命令,安装相应的loader

npm i style-loader css-loader url-loader file-loader

测量试验非js类型文件打包效果

对象:在js代码中import那么些非js类型的文书中的内容

再src子目录下,创制测量试验文件test.css。以至在images中放入jpg图片代用(一张就足以了,emmm小编随时放多了就先不删了)

官方澳门新永利下载 6 

src下文件构造

在Index.js中import这些非js文件。

//index.js
import Vue from 'vue'
import App from './app.vue'
import './assets/styles/test.css' //import css文件
import './assets/images/0.jpg' //import 图片
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
 render: (h) => h(App)
}).$mount(root)

提及底在调整台试行 npm run build测验结果。

打包成功图片相同上边。

2.4有关css预微型机。stylus的结议和测验

stylus是css的风华正茂种预微处理机,文件类型是 .styl 大家那边对其张开陈设

第意气风发在webpack.config.js文件中的rules:[]模块中跟下边相似,参预如下代码,让其能够识别.styl文件

//webpack.config.js
  {
  test:/.styl$/,
  use: [
   'style-loader',
   'css-loader',
   'stylus-loader'
  ]
  }

下一场在调整台安装stylus所需的loader文件

npm i style-loader stylus-loader

末尾在调节台施行 npm run build测验结果。

2.5配置webpack-dev-server:特意用在付出情形的包装

因为专门的学业情形和我们的付出遭受有所分裂,所以需求计划dev用来区分

首先,安装 webpack-dev-server

npm i webpack-dev-server

然后, 纠正package.json文件 ,在build上边增加dev配置

官方澳门新永利下载 7 

package.json文件配置

然后,修改webpack.config.js

在全局加多target:’web’

官方澳门新永利下载 8 

config.js

因为那些文件要同一时候用在开采景况和标准境况,所以要加叁个条件推断,在跑npm的时候拉长变量标志不一致情状。

因为在windows和mac情状下的一声令下会不一致,这里设置cross-env
包,使得在不相同开采意况下命令相通。

npm i cross-env

再次改革package.json文件,在“build:”和“dev:”行加多dev命令

cross-env NODE_ENV=development  前面不改变

官方澳门新永利下载 9 

package.json文件build

接下来,在webpack.config.js文件中开展推断。

首先,配置config.devServer

webpack2之后就能够直接用config.devServer实行配备了。

退换文件底部几行代码

官方澳门新永利下载 10 

在文书的最终加上如下代码

官方澳门新永利下载 11 

config.devServer

注意:
host:’0.0.0.0’不要一贯写localhost,那样外人的Computer就访谈不了了;port不要被挤占,不然会打不开

最后.安装html-webpack-plugin插件使得html能够用作入口,自动包蕴JS

npm i html-webpack-plugin

修改webpack.config.js文件

官方澳门新永利下载 12 

config.js

官方澳门新永利下载 13 

config.js

至此,dev配置基本到位

调节台执行 npm run dev

npm run dev

卷入成功的话就能够在浏览器中查阅效果了,

设若现身错误,依照提醒改正,注意端口是不是占用。作者的8000端口占用了,后来用了8080端口就好了

浏览器访谈:localhost:8080,能够查阅渲染效果。恩,背景图0.jpg是自家爱豆23333。笔芯。注意左上角有革命的abc。

官方澳门新永利下载 14 

浏览器效果

2.6提及底还有部分事物要加在config.js中

聊起底还要加一些东西

1) historyFallback:{}

官方澳门新永利下载,因为我们做的是单页应用,所以要加一下地址映射到入口index.html,那几个先忽视

2) 热加载作用。

hot效率,能够兑现部分渲染:比方您改了一个构件的代码,页面只重复渲染这些组件并不是全部页面实行渲染,不必要开展刷新操作。

3) 一些插件

webpack.HotModuleReplacementPlugin()启动hot功能

webpack.NoEmitOnErrorsPlugin(卡塔尔(英语:State of Qatar)去除一些不必要的新闻

4) 浏览器调节和测量试验代码功效的工具

在浏览器中调理的时候,代码不会转码。

config.devtool = “#cheap-module-evel-source-map”

官方澳门新永利下载 15 

终极布署达成后,重新npm run dev一回

npm run dev

顺理成章今后,能够在浏览器中测量试验热加载效果,更正app.vue文件中的text的开始和结果,就足以看出左上角极其黄褐的字在变了emmmm

//app.vue
<template>
 <div id="text">{{text}}</div>
</template>
<script>
 export default{
 data(){
  return {
  text: 'abc' //打开浏览器,然后直接改这里就可以实时看到文字变化效果了。
  }
 }
 }
</script>
<style>
 #test{
 color: red;
 }
</style>

总结

如上所述是作者给大家介绍的Vue+webpack项目底子配置教程,希望对我们全体助于,即使大家有别的疑问请给小编留言,作者会及时回复我们的。在这也非常多谢大家对帮客之家网址的支撑!

前段时间在上学webpack,跟着课程叁个单页面应用,在这里边记录一下。那一个有些关键讲了哪些安顿webpack的环…

发表评论

电子邮件地址不会被公开。 必填项已用*标注