WebPack创建项目

作者: 1CC4 | 来源:发表于2020-01-13 20:28 被阅读0次

使用React构建应用
webpack安装
基于element-ui的框架（一）环境搭建
webpack相关
WebPack创建项目
如何在vue中使用sass
vue 使用预编译器 sass
Vue创建多页面应用
webpack
vue-cli搭建项目记录

现代JavasScript应用程序的模块打包器(module bunder)

webpack的两大特点：1、模块化 2、打包

手动创建WebPack项目

一、创建项目目录

1、/src
2、创建webpack.config.js配置入口（出口）文件

二、创建项目

初始化：npm init -y 自动保存到package.json项目描述文件

三、安装webpack依赖包

npm i webpack -g 保存webpack到全局npm

npm i webpack-cli -g 保存webpack-cli到全局

四、入口--出口配置


const path = require('path');  //nodejs内置模块

module.exports = {
  /**
   * 入口
   */
  entry: './src/main.js',
  /**
   * 出口
   */

  output: {
    path: path.resolve(__dirname, 'dist'),  // d://webpakc/dist
    filename: 'bundle.js'   // d://webpakc/dist/bundle.js
  },
}

五、打包执行

1、webpack --mode development 生成/dist/bundle.js文件
2、webpack.json 文件配置

"bulid":".\\node_modules\\.bin\\webpack --mode development"

打包：npm run bulid

运行html

一、babel-loader

1、安装

webpack 3.x | babel-loader 8.x | babel 7.x

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

2、webpack.config.js 文件配置（规则）

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

二、HtmlWebpackPlugin安装（简化了HTML文件的创建，为webpack包提供服务）

1、安装

npm install --save-dev html-webpack-plugin

2、配置

plugins: [new HtmlWebpackPlugin({
    filename: 'index.html',
    template: __dirname + "/public/index.html"
})]

修改后每次打包才能运行

三、loader安装（模块的源代码进行转换）

1、css解析

npm install style-loader --save-dev 依赖style-loader

npm install --save-dev css-loader css-loader
```
{
   test: /\.css$/,
   use: [ 'style-loader', 'css-loader' ]
 }
```

2、图片解析

npm install --save-dev url-loader依赖file-loader

npm install --save-dev url-loader url-loader

{
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          //图片大小小于8192b时，图片解析为base64编码嵌入到js中，减少请求次数
          limit: 8192  
        }
      }
    ]
  }

添加img节点后，img不能直接设置src属性

四、本地服务-->开发中 Server(devServer)

浏览器解析为location：8080

安装
npm install webpack-dev-server --save-dev

配置

  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
    historyApiFallback: true, //不跳转
    inline: true //实时刷新
},

package.json 设置

"serve":".\\node_modules\\.bin\\webpack-dev-server"

运行：npm run serve

执行缓存，实际运行还是需要打包（npm run bulid）

五、Vue使用

将 vue-loader 和 vue-template-compiler 一起安装

(Vue官方文档)[https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E8%AE%BE%E7%BD%AE]

安装

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

配置->webpack.config.js

引入：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

配置：

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

使用

1、新建App.vue文件

2、main.js引入vue和App.vue并实例化

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

new Vue({
    el: '#app',
    render: createElements => createElements(App)
})

六、router使用

安装
npm i vue-router -S
引用

新建/router/index.js文件

import Vue from 'vue' //集成vue
import Router from 'vue-router'//引用vue-router

//vue使用Router插件
Vue.use(Router);

// 创建路由数组
const routes = [
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        name: 'login',
        component: () => import('../views/Login.vue'),
    },
    {
        path: '/main',
        name: 'main',
        component: () => import('../views/Main.vue'),
    }
]
// Router对象中使用配置
const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes, //一定是routes（routes是Router里面的属性）
})
// 暴露router
export default router;

main.js 中引用

import router from './router/index.js'

new Vue({
    el: '#app',
    router,
    render: createElements => createElements(App),
})

七、element-ui使用

安装

npm i element-ui -S

main.js 文件引入

// 全局引入
import Element from 'element-ui'
//样式一定要引入
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element);

配置字体图标
```
{
    test: /\.(ttf|eot|woff|woff2|svg)/,
    use: ['file-loader']
},
```
如果不配置会出现element-ui 字体文件fonts/element-icons.ttf | fonts/element-icons.woff 加载报404
html文件中直接使用就可以