webpack 配置(Vue起步)

更新时间:2019-08-08 11:14:27点击次数:474次
1.起步
1-1 安装
我们安装的时候把webpack安装到开发依赖(–save-dev)中,因为 webpack 只是一个打包工具,项目上线不需要,上线的是打包结果,而不是工具,所以为了区分核心包依赖和开发工具依赖,这里通过 --save 和 --save-dev 来区分

全局安装

npm install --global webpack
npm install --global webpack-cli

本地安装(推荐)

npm install --save-dev webpack
npm install --save-dev webpack-cli
//--save-dev 简写 -D
npm i -D xxx

1-2 打包
webpack 模块入口文件路径 模块出口文件路径

1-3 划分目录
源码存储在 src 目录
打包后存放在 dist 目录
1-4 打包配置文件 (在node环境运行)
// 实际在node环境中运行
const path = require('path')

module.exports = {
    entry: './src/main.js', //入口文件模块路径
    output:{
        path:path.join(__dirname,'./dist'),//__dirname node内置变量
        filename:'bundle.js'//打包后的文件名
    }
}

1-5 安装到项目中的需要配置 Npm scripts (package.json 的 scripts)
“build”:“webpack”

npm run a

##Strat比特殊

npm start

  "name": "webpack",
  "version": "1.0.0",
  "description": "My webpack project",
  "main": "index.js",
  "dependencies": {
    "webpack-cli": "^3.3.5",
    "webpack": "^4.35.0"
  },
  "devDependencies": {},
  "scripts": {
// "a":"a.js"
+  "build": "webpack",
+  "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

1-6 ES6规范
导入 import (require)
导出 export (module.exports)
2.HtmlWebpackplugin
解决资源打包 根目录下的index.html无法访问资源的问题

解决打包文件改了 index 的引入文件也要进行修改

实际上还是把你的index.html打包到 dist (和bundle放一块) 自动引用 scripts

安装
npm i -D html-webpack-plugin
1
配置
+  const HtmlWebpackPlugin = require('html-webpack-plugin')


plugins: [
+ new HtmlWebpackPlugin({
+ template:'./index.html'
+ })
]

3.Develoment
3-1 hot-module-replacement 热更新
配置

webpack.config.js

const webpack = require('webpack');


devServer: {
contentBase: './',
+ hot: true
}



plugins: [
new HtmlWebpackPlugin({
template:'./index.html'
}), 
new VueLoaderPlugin(),
+ new webpack.HotModuleReplacementPlugin()
]

package.json 如果是安装 webpack-cli

"dev": "webpack-dev-server --hotOnly"
1
3-2 webpack-dev-server
解决每次打包都麻烦,而且即使有-save也不方便,还需要自己手动刷新浏览器。webpack-dev-server这个工具可以实现监视代码改变,自动打包,打包完毕自动刷新浏览器的功能

安装
npm i -D webpack-dev-server
1
配置
//webpack.config.js
mode: 'development',
entry: './src/main.js', //入口文件模块路径
+  devtool: 'inline-source-map',
    //这里模拟dist目录。缓存在内存中不会显示  一般为 ./
+  devServer: {
+     contentBase: './dist'
+  }

//package.json
 "test": "echo \"Error: no test specified\" && exit 1",
 "build": "webpack",
 "watch": "webpack --watch",
+  "start": "webpack-dev-server --hotOnly" //这里是start 所以使用npm start  否则 npm run xxx 建议dev

3-2-1 启动开发模式
npm start//取决于"start": "webpack-dev-server --open"

4. 对于Es6语法处理 babel(默认只转换语法)
babel安装
npm install -D babel-loader @babel/core @babel/preset-env

配置
module: {
  rules: [
      
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
      
  ]
}

4-1 Polyfill(转换API)
安装

npm install -D @babel/polyfill

配置

//原来
//entry: './src/app.js', //入口文件模块路径

module.exports = {
  entry: ["@babel/polyfill", "./src/main.js"]
}

4-2 配置transform-runtime 来解决代码重复
在打包过程中,babel 会给某些包提供一些工具函数,而这些工具函数可能会重复出现在多个模块。这样会导致打包体积过大,所以babel提供了一个babel-transform-runtime来解决这个打包体积过大的问题。

安装

npm install -D @babel/plugin-transform-runtime
npm install --save @babel/runtime

配置(cacheDirectory 解决webpack打包慢的问题)

rules: [
  // the 'transform-runtime' plugin tells Babel to
  // require the runtime instead of inlining it.
  {
    test: /\.m?js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        cacheDirectory:true,
        presets: ['@babel/preset-env'],
          //配置此行
        plugins: ['@babel/plugin-transform-runtime']
      }
    }
  }
]

5.Loader
5-1.loading css
安转
npm i -D style-loader css-loader  

引入
//举例
import './app.css'

配置webpack

顺序 不可逆

style-loader => css-loader

module:{
    rules: [
  {
    test: /\.css$/,
    use: [
      // style-loader
      //{ loader: 'style-loader' },
      // css-loader
     // {
        //loader: 'css-loader',
        //此处是一个坑 设置modules可能会导致打包组件css选择器乱码 导致无法使用
       // options: {
         // modules: true
       // }
      //}
      use: ['style-loader', 'css-loader']
    ]
  }
]
}

2.Loading image
安装
npm i -D file-loader

配置
module: {
rules: [{
test: /\.css$/,
use: [
// style-loader
{
loader: 'style-loader'
},
// css-loader
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}, {
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}]
}

3.loading less
安装
npm i -D style-loader css-loader less-loader less

配置
{
test: /\.less$/,
use: [
'style-loader',
                'css-loader',
                'less-loader'
]
}

4.loading Vue
安装

npm install -D vue-loader vue-template-compiler

配置

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件!
    new VueLoaderPlugin()
  ]
}


加载使用第三方包的问题
例如:

import $ from 'jquery'

这样打包也会同时打包 jquery 到 bundle.js

解决办法: (key为包名 value为接口 )

module.exports = {
  //...
  externals: {
    jquery: 'jQuery',
    vue:'Vue',
    'vue-router':'VueRouter'
  }
}

6.模块环境中使用vue-router
安装

npm i vue-router
1
引用资源

<script src="/node_modules/vue-router/dist/vue-router.js"></script>
1
配置externals

module.exports = {
  //...
  externals: {
    vue:'Vue',
    'vue-router':'VueRouter'
  }
}

在 router.js加载使用

import VueRouter  from 'vue-router'
import Foo from './components/Foo.vue'
import Bar from './components/Bar.vue'

export default new VueRouter({
routes:[
{
path:'/foo',
component:Foo
},
{
path:'/bar',
component:Bar
}
]
})

在 main.js文件中配置使用路由对象

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
components:{App},
router,
template:'<App />'
}).$mount('#app')

在 App.vue中设置路由出口

<template>
<div id="app">
<h1>跟组件</h1>
<ul>
<router-link tag="li" to="/foo">
<a>Foo</a>
</router-link>
<router-link tag="li" to="/bar">
<a>Bar</a>
</router-link>
</ul>
<div>
<router-view></router-view>
</div>
</div>


</template>

<script>

</script>

<style>

</style>


SP:附加
只安装 package 里面 dependencies 依赖内容

npm i --production

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息