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

导读： 1. 创建项目目录和需要的文件夹（/src和public等）2. 初始化项目npm init -y输入以上代码进行项目初始化，会自动生成一个package.json项目描述文件，如下package.json文件需要注意两个点name 为项目名，不能出现大写main 为项目入口的j...

1. 创建项目目录和需要的文件夹（`/src`和`public`等）

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文件中去配置

需要注意webpack和webpack-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

1. 创建项目目录和需要的文件夹（/src和public等）