菜单

webpack使用手续

2019年5月4日 - 金沙前端

什么是webpack

web
pack是2个前端能源模板管理的卷入工具,它能够将css,js,image,vue等文件作为几个模块,自动处理内部的依赖性关系,依照内定的条条框框实行包装,最后将这几个财富输出到2个统一的.js文件中,现在在系统中只必要请求这一个打包好的js文件就可以成功有着的功能

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

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

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

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

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

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

    1. 暗中同意配置文件名称webpack.config.js

    module.exports = {
    entry:’亟待打包的文书‘ // 路径+文件名 一般为 ./src/xxx.js
    output:{
    path:’出口文件的不二等秘书籍‘ // 相对路线 使用__dirname + 路径
    filename:*输出文件的名称* // 一般都为build.js/bundle.js
    }
    }

    1. 运用webpack实行李包裹装
      • 即使是私下认可配置文件 则一贯在指令行中 输入 webpack
      • 一旦是别的改过名字的布置文件 则使用
        webpack --config 配置文件名
        2.6. webpack loader的使用

首先你要明确本身设置了node.js和npm包 管理工科具

壹.新建项目名称为—my-project的三个系列

金沙国际 1

金沙国际 2

正在上传…取消)

二.npm init -y  开始化项目

三.装置项目依赖—–》npm install –save vue私下认可安装新型版vue

4.npm install –save-dev webpack
webpack-dev-server安装webpack,webpack-dev-server(是一个袖珍的Node.js
Express服务器)

*进展:npm install 在设置 npm 包时,有二种命令参数可以把它们的音讯写入
package.json 文件,1个是npm install –save另贰个是 npm install
–save-dev,他们外表上的差别是–save 会把依赖包名称加多到 package.json
文件 dependencies 键下,–save-dev 则加多到 package.json 文件
devDependencies 键下,–save-dev 是您付出时候依赖的事物,–save
是你揭橥之后还依靠的东西。*

金沙国际 3

金沙国际 4

正在上传…取消)

伍.npm install –save-dev babel-core babel-loader
babel-preset-es20一5装置babel,babel的功用是将es6的语法编写翻译成浏览器认知的语法es5

金沙国际 5

金沙国际 6

正在上传…取消)

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

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

举行:css-loader 和
style-loader,二者管理的职责区别,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一.文件目录如下;

金沙国际 7

金沙国际 8

正在上传…取消)

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

//webpack.config.js 配置文件,本人也是二个规范的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是三个当代JavaScript应用程序的静态模块打包器。它把您的连串作为贰个一体化,通过给定的进口文件开首找到你的品类具备正视模块,使用loaders管理它们,最后打包为三个或几个浏览器可识其他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'
                       }
               ]
       }
      

二、起首化三个node js模块

2.plugin

2.6.2. sass-loader 的使用

一、成立三个索引并在终端中进入当前目录实施npm
init -y

plugin可以成功更加多loader无法成就的意义,插件的存在使得webpack13分灵活

sass-loader是举行scss文件的辨析

2、安装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

1.全局安装webpack===>npm install webpack -g

2.6.3. less-loader 的使用

依旧使用Taobao镜像安装,请直接百度“npm
天猫镜像”,安装过Tmall镜像后再安装其余装置包时可一向把下面命令行的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'
                 }
         ]
    

金沙国际 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 的使用

 

肆.选取webpack-dev-server和html-webpack-plugin达成页面刷新和自动打包

url-loader是进展url财富的辨析

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

(一)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进行网络请求
                 }
         ]
    

金沙国际 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的使用

相关文章

发表评论

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

网站地图xml地图