webpack-前端自动化打包工具创建vue项目

作者:admin 2021-03-11 浏览:1680
导读: 1. 创建项目目录和需要的文件夹(/src和public等)2. 初始化项目npm init -y输入以上代码进行项目初始化,会自动生成一个package.json项目描述文件,如下package.json文件需要注意两个点name 为项目名,不能出现大写main 为项目入口的j...

1. 创建项目目录和需要的文件夹(/srcpublic等)

2. 初始化项目

npm init -y

输入以上代码进行项目初始化,会自动生成一个package.json项目描述文件,如下



package.json文件需要注意两个点
name 为项目名,不能出现大写
main 为项目入口的js文件,需要注意文件名


3. 手动创建webpack.config.js文件、配置项目入口&出口

  • __dirname 表示当前目录 D:\...\...\webpackDemo

  • dist 表示创建了个dist文件夹

  • path 表示文件输出的路径,完整路径为D:\...\...\webpackDemo\dist

  • filename 表示输出的文件名字,其路径为D:\...\...\webpackDemo\dist\bundle.js

const path = require('path'); // nodejs内置模块module.exports = {
    // 入口路径
    entry: './src/main.js',
    // 输出路径
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }}

4. 安装webpack依赖包

// 全局安装webpacknpm i webpack -g 
// webpack辅助工具npm i webpack-cli -g
注意:在全局安装以后,后面配置本地服务时,运行会出现找不到webpack模块的错误,所以这里最好是去实现本地安装
npm i webpack -s
npm i webpack-cli -s

本地安装好以后,可以在package.json文件中去查看到安装的内容,若是全局安装,则看不到安装内容


5. 项目打包

webpack --mode development

打包完成会生成dist文件夹和bundle.js文件,如图



以上是从创建文件夹到项目打包的基本过程,但是我们同时还需要到webpack中的一些必须的loader和插件plugins,以及如何开启项目的本地服务,下面扩展介绍一下

7. 安装 html-webpack-plugin 插件

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

安装好插件后,在webpack.config.js文件中去引入插件并使用插件

const HtmlWebpackPlugin = require('html-webpack-plugin');   // 引入插件module.exports = {
    // 插件;html解析时,自动发现js文件,自动生成在html中的script标签内
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: __dirname + "/public/index.html"
        })
    ]}

6. 开启本地服务

1)安装 webpack-dev-server
npm install webpack-dev-server --save-dev
2)在webpack.config.js文件中进行配置 devServer
const path = require('path'); // nodejs内置模块module.exports = {
    // 本地服务
    devServer: {
        contentBase: path.join(__dirname, 'dist'),  //本地服务器所加载的页面所在的目录
        compress: true,
        port: 9000  // 端口号
    }}
3)在package.json文件中去配置

需要注意webpackwebpack-cli需要是本地安装

image.png


8. 另外我们还需要一些loader,配置loader会让webpack去处理那些css文件、js文件、image文件、file文件等

1)babel-loader 编译es6语法为es5
  • 安装

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env
  • 配置

const path = require('path'); // nodejs内置模块
 module: {
     rules: [
       {
         test: /\.js$/,
         exclude: path.resolve(__dirname, 'node_modules'),
         include: path.resolve(__dirname, 'src'),
         use: {
           loader: 'babel-loader',
           options: {
             presets: ['@babel/preset-env']
           }
         }
       }
     ]
   }
2)css-loader
  • 安装

npm install style-loader css-loader --save
  • 配置

{
    test: /\.css$/,
    use: [ 'style-loader', 'css-loader' ]}
3)文件处理loader
  • 安装

npm install file-loader url-loader --save
  • 配置

{
   test: /\.(png|jpg|gif)$/,
   use: [
     {
        loader: 'url-loader',
        options:{
         limit: 8120        }
    }
  ]  
}
4)eslint-loder
  • 安装

npm install --save-dev eslint-loader
  • 配置

{
    test: /\.js$/,
    loader: 'eslint-loader',
    enforce: "pre",
    include: [path.resolve(__dirname, 'src')], // 指定检查的目录
    options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine 
        formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范    }}
5)vue、vue-loader (若需要vue开发,必需的loader)
  • 安装vue 、vue-loader以及vue-template-compiler

npm install vue vue-loader vue-template-compiler
  • 配置loader

{
    test: /\.vue$/,
    loader: 'vue-loader'},
  • 配置插件

const VueLoaderPlugin = require('vue-loader/lib/plugin');   // 引入vue-loader相关插件// 插件;html解析时,自动发现js文件,自动生成在html中的script标签内plugins: [
  new VueLoaderPlugin() // 引入vue文件必需的插件]

9. webpack.config.js 的示例代码

const path = require('path'); // nodejs内置模块const HtmlWebpackPlugin = require('html-webpack-plugin');   // 引入插件const VueLoaderPlugin = require('vue-loader/lib/plugin');   // 引入vue-loader相关插件module.exports = {
    // 本地服务
    devServer: {
        contentBase: path.join(__dirname, 'dist'),  //本地服务器所加载的页面所在的目录
        compress: true,
        port: 9000  // 端口号
    },
    // 入口路径
    entry: './src/main.js',
    // 输出路径
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            // 配置vue-loader,识别.vue文件
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // 配置babel-loader,将es6转义成es5语法
            {
                test: /\.js$/,
                exclude: path.resolve(__dirname, 'node_modules'),   // 不编译node_modules文件夹
                include: path.resolve(__dirname, 'src'),    // 编译src文件夹
                use: {
                    loader: 'babel-loader',
                    // loader的版本
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            // 配置 css loader
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // 文件大小(单位 byte)低于指定的限制时 url-loader
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 限制文件大小,小于8k
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    },
    // 插件;html解析时,自动发现js文件,自动生成在html中的script标签内
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: __dirname + "/public/index.html"
        }),
        new VueLoaderPlugin() // 引入vue文件必需的插件
    ]}

10. package.json 示例代码

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": ".\\node_modules\\.bin\\webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.0.0-beta.0",
    "css-loader": "^4.3.0",
    "file-loader": "^6.1.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.12",
  },
  "devDependencies": {
    "html-webpack-plugin": "^4.4.1",
    "webpack-dev-server": "^3.11.0"
  }}


作者:笑该动人d
链接:https://www.jianshu.com/p/fe667121fa8b
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


转载请注明出处:admin,如有疑问,请联系(47379717)。
本文地址:http://ohoyoo.com/view/549.html

相关文章

添加回复:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。