【4858美高梅】超详细的上学笔记,webpack使用手续

By admin in 4858美高梅 on 2019年4月9日

什么是webpack

web
pack是八个前端能源模板管理的包裹工具,它能够将css,js,image,vue等公事作为三个模块,自动处理之中的借助关系,依照钦命的规则进行打包,最后将那些能源输出到二个合并的.js文件中,现在在系统中只要求请求这一个打包好的js文件即可实现全数的效果

  1. 全局安装 nrm: npm install nrm -g

    1. 查看镜像源 nrm ls
    2. 切换Tmall镜像源 nrm use taobao
    3. 大局安装webpack npm install webpack@1.14.0 -g
      二.四. webpack 实行代码打包

    导出三个模块 module.exports = 需要导出的对象

    导入一个模块 var 模块名 = require(文件路径)

    webpack 打包命令
    webpack 需要打包的文件名 输出的文件名

    例如:
    webpack main.js build.js
    2.5. webpack 配置文件

    1. 默许配置文件名称webpack.config.js

    module.exports = {
    entry:’内需打包的公文‘ // 路径+文件名 一般为 ./src/xxx.js
    output:{
    path:’输出文件的途径‘ // 绝对路径 使用__dirname + 路径
    filename:*输出文件的名称* // 1般都为build.js/bundle.js
    }
    }

    1. 行使webpack实行李包裹装
      • 一旦是暗中同意配置文件 则平素在指令行中 输入 webpack
      • 只若是别的改过名字的铺排文件 则使用
        webpack --config 配置文件名
        2.6. webpack loader的使用

先是你要分明本身设置了node.js和npm包 管理工具

1.新建项目名叫—my-project的3个品类

4858美高梅 1

4858美高梅 2

【4858美高梅】超详细的上学笔记,webpack使用手续。正在上传…取消)

二.npm init -y  发轫化项目

3.设置项目信赖—–》npm install –save vue暗中同意安装新型版vue

四.npm install –save-dev webpack
webpack-dev-server安装webpack,webpack-dev-server(是2个小型的Node.js
Express服务器)

*拓展:npm install 在装置 npm 包时,有三种命令参数能够把它们的音信写入
package.json 文件,3个是npm install –save另一个是 npm install
–save-dev,他们外表上的分裂是–save 会把正视包名称添加到 package.json
文件 dependencies 键下,–save-dev 则添加到 package.json 文件
devDependencies 键下,–save-dev 是您付出时候正视的东西,–save
是你发布之后还借助的事物。*

4858美高梅 3

4858美高梅 4

正在上传…取消)

5.npm install –save-dev babel-core babel-loader
babel-preset-es201伍设置babel,babel的机能是将es六的语法编写翻译成浏览器认识的语法es5

4858美高梅 5

4858美高梅 6

正在上传…取消)

陆.npm install –save-dev vue-loader
vue-template-compiler用来分析vue的机件,.vue后缀的文书

7.npm install –save-dev css-loader style-loader用来解析css

进行:css-loader 和
style-loader,2者处理的职务分裂,css-loader使你能够使用类似@import 和
url(…)的点子达成require()的法力,style-loader将富有的推测后的体裁参与页面中,2者组合在联合署名使你能够把体制表嵌入webpack打包后的JS文件中。

八.npm install –save-dev url-loader file-loader 用于打包文件和图纸

九.npm install –save-dev sass-loader node-sass用于编写翻译sass

十.npm install –save-dev vue-router安装路由

>编辑项目目录以及充裕代码

1一.文件目录如下;

4858美高梅 7

4858美高梅 8

正在上传…取消)

//dist文件是前面推行webpack指令生产的,不用管;

//webpack.config.js 配置文件,自身也是1个专业的Commonjs规范的模块;

//routes.js文件放路由安顿文件;

//index.html首页入口文件

//App.vue是种类进口文件。

//main.js那是项目的着力文件。全局的铺排都在那个文件之中配备。

//commponents目录里面放了国有组件header文件。

//views文件放详情页面;

>代码

//webpack.config.js

*注释:

test:3个相配loaders所拍卖的文件的拓展名的正则表达式(必须)

loader:loader的名称(必须)

include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不供给处理的文书(文件夹)(可选);*

var path = require(‘path’)

var webpack = require(‘webpack’)

module.exports = {

entry: ‘./src/main.js’,//值能够是字符串、数组或对象

output: {

path: path.resolve(__dirname, ‘./dist’),//Webpack结果存款和储蓄

publicPath:
‘/dist/’,//懵懂,懵逼,//可是“publicPath”项则被广大Webpack的插件用于在生养格局和费用方式下下更新内嵌到css、html,img文件里的url值

filename: ‘build.js’

},

module: {

rules: [

{

test: /\.vue$/,

loader: ‘vue-loader’,

options: {

loaders: {

}

// other vue-loader options go here

}

},

{

test: /\.js$/,

loader: ‘babel-loader’,

exclude: /node_modules/

},

{

test: /\.(png|jpg|gif|svg)$/,

loader: ‘file-loader’,

options: {

name: ‘[name].[ext]?[hash]’

}

}

//自身加的

,

{

test: /\.css$/,

loader: “style-loader!css-loader”

}

,

{

test: /\.scss$/,

loader: “style-loader!css-loader!sass-loader!”

}

]

},

resolve: {

alias: {

‘vue$’: ‘vue/dist/vue.esm.js’

}

},

devServer: {//webpack-dev-server配置

historyApiFallback: true,//不跳转

noInfo: true,

inline: true//实时刷新

},

performance: {

hints: false

},

devtool: ‘#eval-source-map’

}

if (process.env.NODE_ENV === ‘production’) {

module.exports.devtool = ‘#source-map’

//

module.exports.plugins = (module.exports.plugins || []).concat([

new webpack.DefinePlugin({

‘process.env’: {

NODE_ENV: ‘”production”‘

}

}),

new webpack.optimize.UglifyJsPlugin({

sourceMap: true,

compress: {

warnings: false

}

}),

new webpack.LoaderOptionsPlugin({

minimize: true

})

])

}

//routes.js

// 引用模板

import Vue from ‘vue’;

import Router from ‘vue-router’;

import indexPage from ‘./components/header.vue’

import homePage from ‘./views/home.vue’

import aboutPage from ‘./views/about.vue’

Vue.use(Router)

export default new Router({

routes:[

{

path:’/’,

component:homePage

},

{

path:’/about’,

component:aboutPage

}

]

})

//index.html

//App.vue

import HeaderTab from ‘./components/header.vue’;

export default {

name: ‘app’,

data () {

return {

msg: ‘Welcome to Your Vue.js App’

}

},

components:{

HeaderTab

}

}/*此地sass编写翻译常常*/

$redColor:#f00;

h2{

color:$redColor;

}

#app {

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

h1, h2 {

font-weight: normal;

}

ul {

list-style-type: none;

padding: 0;

}

li {

text-align: left;

margin: 0 10px;

}

a {

color: #42b983;

}

//main.js

//main.js那是项指标为主文件。全局的陈设都在那几个文件之中配备

import Vue from ‘vue’

import App from ‘./App.vue’

import router from ‘./routes.js’

import ‘./assets/styles/base.css’

//import ‘./assets/sass/reset.sass’//报错权且不用sass

Vue.config.debug = true;//开启错误提示

new Vue({

router,

el: ‘#appIndex’,

render: h => h(App)

})

//home.vue

//index.vueexport default {

name: ‘indexP’,

data () {

return {

todos: [

{ text: ‘Learn JavaScript’ },

{ text: ‘Learn Vue’ },

{ text: ‘Build something awesome’ }

]

}

},

methods:{

eClick(){

console.log(9999);

}

}

}

补充:

把webpack和webpack-dev-server命令转成npm命令

安装 across-env:npm install cross-env –save-dev

npm installcross-env –save-dev

package.json 文件添加

“dev”:”cross-env NODE_ENV=development webpack-dev-server –open
–hot”,”build”:”webpack”

ok,执行npm指令npm run
dev,浏览器打开新窗口(也正是把npm的dev命令指向webpack-dev-server命令);

npmrundev

实践npm run build(也正是把npm的build指令指向webpack命令)

npmrunbuild

Webpack是1个现代JavaScript应用程序的静态模块打包器。它把您的门类作为二个完整,通过给定的入口文件开始找到您的品种拥有信赖模块,使用loaders处理它们,最后打包为1个或两个浏览器可识别的JavaScript文件,能够减小页面请求,优化网页质量。

一.特点:

loader:预处理器。在js代码执行此前必要实践的一部分处理。
2.6.1. css-loader

什么样运用Webpack

1.loader;

css-loader 是拓展css解析,能够使浏览器符合规律识别js文件中程导弹入的 css 文件

壹、安装node JS
(webpack在执行打包压缩的时候是凭借nodejs的),请参见node
JS官网举办下载安装

web
pack自己自能处理JavaScript类型的文书,就算要拍卖其余门类的文本,就要求loader(加载器)举行转换.loader能够视作是模块与静态资源的转换器,他自个儿也是一个函数,接收源文件作为参数,重返转换后的结果

  1. 初始化package.json
    npm init

    1. 安装css-loader以及style-loader
      npm install style-loader css-loader –save-dev

    2. 在webpack.config.js文件中实行布署

       module:{
               loaders:[
                       {
                               test: /\.css$/,
                               loader:'style-loader!css-loader'
                       }
               ]
       }
      

贰、初叶化3个node js模块

2.plugin

2.6.2. sass-loader 的使用

一、创设一个索引并在终点中进入当前目录执行npm
init -y

plugin能够做到更加多loader无法一气浑成的成效,插件的存在使得webpack10分灵活

sass-loader是开始展览scss文件的解析

二、安装webpack和webpack-cli(命令行工具):

贰.施用手续

  1. 安装sass-loader
    npm install node-sass sass-loader style-loader css-loader –save-dev

    2.配置sass-loader
    loaders:[

                 {
                         test: /\.scss$/,
                         loader:'style-loader!css-loader!sass-loader'
                 } 
         ]
    

npm install webpack webpack-cli
–save-dev

壹.全局设置webpack===>npm install webpack -g

2.6.3. less-loader 的使用

依旧选拔Taobao镜像安装,请直接百度“npm
Tmall镜像”,安装过Taobao镜像后再设置别的装置包时可平素把上边命令行的npm替换来cnpm

贰.在当下项目中安装webpack===>npm install webpack –save

less-loader是开始展览less文件的解析

上面是自家的目录结构(除了node_modules和package.json是自动生成的,其余文件都要手动添加)

3.利用webpack打包CSS文件

  1. 安装scss-loader
    npm install less less-loader style-loader css-loader –save-dev

    2.配置scss-loader
    loaders:[

                 {
                         test: /\.less$/,
                         loader:'style-loader!css-loader!less-loader'
                 }
         ]
    

4858美高梅 9

打包css文件须求注重style-loader/css-loader,利用npm安装.npm install
style-loader css-loader
–save-dev;在webpack.config.js文件中展开计划的时候,loader:’style-loader!css-loader’.style-loader放在前方,与CSS-loader中间中”!”分隔开

2.6.4. url-loader 的使用

 

4.用到webpack-dev-server和html-webpack-plugin实现页面刷新和机关打包

url-loader是开始展览url资源的解析

 3、打开webpack.config.js文件,定义入口和输出

(1)html-webpack-plugin这么些插件可以自动生成三个index.html文件在内部存款和储蓄器中,只有个这么web
pack-dev-server才能落成实时刷新页面和实时打包

  1. 安装url-loader
    npm install file-loader url-loader --save-dev

    2.配置url-loader
    loaders:[

                 {
                         test: /\.(png|jpg|gif|ttf)$/,
                         loader:'url-loader!limit=20000&name=images/[hash:8].[name].[ext]'
                         // limit单位是字节 1kb = 1024b(字节)
                         // 对于比较小的图片资源可以使用limit进行限制 
                         // 小于limit值转换成base64字符串内嵌到js代码中
                         // 大于limit值的图片才转成URL进行网络请求
                 }
         ]
    

4858美高梅 10

a).安装:npm install html-webpack-plugin  –save-dev

2.6.5. webpac-dev-server的使用

 

b).在webpack.config.js文件中程导弹入 var
HtmlWebpackPlugin=require(‘html-webpack-plugin’);

1. 安装webpack-dev-server

npm install webpack@1.14.0 webpack-dev-server@1.16.0 --save-dev

2. 安装自动生成HTML文件的插件
npm install html-webpack-plugin@2.28.0 --save-dev

3. 修改package.json文件

        "scripts": {
                "dev": "webpack-dev-server --hot --inline --open --port 5008"
        },

4. 配置webpack.config.js中的内容

- 引入html-webpack-plugin
        `var htmlWP = require('html-webpack-plugin');`
- 在modul.exports中加入
         plugins:[
                new htmlWP({
                        title: '首页',  //生成的页面标题
                        filename: 'index.html', //webpack-dev-server在内存中生成的文件名称,自动将build注入到这个页面底部,才能实现自动刷新功能
                        template: 'template.html' //根据template.html这个模板来生成(这个文件程序员自己书写)
                })
        ]

5. 运行 npm run dev

肆、在package.json文件中添加三个npm脚本,那样运营本地的webpack比较便宜

Plugins:[

2.6.6. babel-loader的使用

4858美高梅 11

new HtmlWebpackPlugin({

babel-loader是用来将es陆语法转换到es伍语法

 

       title:’生成页面包车型大巴标题’

  1. 安装babel-loader
    npm install babel-core@6.24.0 babel-loader@6.4.1 babel-preset-es2015@6.24.0 babel-plugin-transform-runtime@6.23.0 --save-dev

    1. 配置webpack.config.js文件

      {

       test: /\.js$/,  // 将.js文件中的es6语法转成es5语法
       loader:'babel-loader',
       exclude:/node_modules/ // 排除node_modules文件夹下的js文件不用被转换
      

      }

    2. 配备babel的转码规则

      babel:{

       presets:['es2015'],  // 配置将es6语法转换成es5语法
       plugins:['transform-runtime'] // 用来解析vue文件
      

      }

五、在巅峰中运作 npm run
build 就足以在dist文件夹下生成打包后的bundle.js文件

       filename:’index.html’//生成页面包车型地铁文件名称

2.7. webpack解析vue文件

4858美高梅 12

       template:’index.html’//依照那么些模板来变化上边的文本

2.7.1. 安装vue-loader解析.vue文件

 

})

1. 安装相关包
`npm install vue vue-loader@11.3.4 vue-template-compiler babel-plugin-transform-runtime@6.23.0 --save-dev`

2. 配置webpack.config.js文件
{
        test: /.vue$/,  // 解析 .vue 组件页面文件
        loader:'vue-loader' 
}

如何选取Webpack处理除javascript以外的文书

]

2.7.二. .vue文件基本代码结构

设置loader允许webpack处理这么些非javascript文件(webpack自个儿只可以处理javascript),将对应类型的公文转换为webpack能够处理的模块。

c).安装npm install webpack webpack-dev-server –save-dev 

贰个.vue文件就是2个vue的零部件
// 一. 零件模板
<template>
<div>

拍卖体制文件

d).在package.json中的”scripts”:{

<span v-text=”msg” class=”red”></span>
</div>
</template>

一、安装css-loader、style-loader :

     “dev”:”webpack-dev-server –inline –hot –port 端口号 –open”

// 2. 负责导出vue的对象
<script>
        // 负责导出 .vue这个组件对象(它本质上是一个Vue对象,所以Vue中该定义的元素都可以使用)
        export default{  // es6的导出对象的写法
                data(){  //等价于 es5的 data:function(){
                        return {
                                msg :'hello vuejs'
                        }
                },
                methods:{

                },
                created(){

                }
        }
</script>

// 3. 书写组件内部的样式
<style scoped>
// scoped表示这个里面写的css代码只是在当前组件页面上有效,不会去影响到其 他组件页面
        .red{
                color: red;
        }
</style>

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

     “build”:”webpack”

二.七.3. 类别进口文件main.js中渲染组件

css-loader:允许webpack打包信赖的css文件   
   

}

// 1.0 导入vue核心包
// 凡是使用npm安装的包 引入的时候都不需要写相对路径 只需要写包名即可
import Vue from 'vue';

// 2.0 导入App.vue的vue对象
import App from './App.vue';

// 3.0 利用Vue对象进行解析渲染
new Vue({
        el:'#app',
        render:function(create){return create(App)} //es5的写法
        // render:c=>c(App)  // es6的函数写法 =>:goes to
});

style-loader:将css-loader处理后的样式注入到html的head内

e).输入钦命npm run dev即可自动打开浏览器,端口号即为你协调安顿的端口号

贰.八. 运用webpack以及npm成立项目

二、在webpack.config.js配置文件中布署loader,如下:

webpack相关参数:

1. 创建项目文件夹

2. 创建npm的配置文件package.json

npm init -y

3. 创建webpack配置文件(webpack.config.js)

4. 根据项目需求安装所需要使用的模块

npm install 包名 --save-dev

 4858美高梅 13

–inline:自动刷新

 

–hot:热加载和inline协作使用

处理es6/7语法

–port 端口号

一、安装babel-loader:

–open:自动在浏览器中打开

npm install babel-loader babel-core
babel-preset-latest –save-dev

4858美高梅 ,–host:能够钦点服务器的ip,不钦点暗许为Localhost1二柒.0.0.一

babel-loader:babel
是一个编写翻译js的平台,他得以帮您达到以下指标:

伍.将es陆语法转换为es5语法

一、让你能使用新型的javascript代码(es陆、es7…),而不用管新专业是还是不是被当下选用的浏览器完全帮助

安装的包:npm install babel-core babel-loader babel-preset-es201伍babel-plugin-transform-runtime –save-dev

2、让你能使用基于javascript进行了扩张的言语

在webpack.config.js文件中开始展览配备

二、在webpack.config.js配置文件中铺排loader,如下:

a).在loader中{

4858美高梅 14

      test:/.\.js$/,

 

      loader:’babel’

拍卖vue组件语法

       exclude:/node_modules/==>忽略那一个文件的编写翻译

一、安装vue-loader和vue:

}

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

b).在babel属性中

npm install vue –save

babel:{

vue-loader:是一个vue加载器,能够将单身的vue组件编写翻译成javascript模块

      presets:[‘es2015’],

2、在webpack.config.js配置文件中布署loader,如下:

       plugins:[‘transform-runtime’]

 4858美高梅 15

}

 

4858美高梅 16

要拍卖vue组件还要求在webpack.config.js配置文件中引进插件,以下标出来的是要新增的:

4858美高梅 17

 4858美高梅 18

 

自动生成html文件

一、安装HtmlWebpackPlugin:

npm install html-webpack-plugin –save-dev

HtmlWebpackPlugin:自动生成html文件(index.html),也得以依据给定的模版文件在他的根底上来生成新的html文件,而且会在文件中活动引用webpack生成的bundle.js文件。

new七个实例能够转移八个html文件

二、在webpack.config.js配置文件中安排如下,还有好多精选能够参考htmlwebpackplugin官网配置

4858美高梅 19

 

dist文件夹生成出来后的文书列表:

4858美高梅 20

 

再有好多关于webpack调节和测试、devServer、热加载等功用请参考webpack官网,第一遍发布小说,有不得法的地点欢迎大家指正,谢谢~~

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有