webpack-实例演示四

Webpack 2022-10-26

1、新建文件夹 例如：webpackDemo2

2、打开命令行窗口并切换到该目录下，输入npm init -y 初始化项目

3、安装需要的lodaer例如：安装 webpack ---->npm install webpack --save-dev

4、在webpackDemo2目录下新建所需文件及文件夹。例如：

5、在webpack.config.js中进行相关配置设置。例如：

var path = require('path')
var webpack = require('webpack')
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');  //分离css单独打包插件
var HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成html模版文件
// const { VueLoaderPlugin } = require('vue-loader/lib/plugin');

module.exports = {
    entry: './src/main.js',//值可以是字符串、数组或对象（设置主程序入口文件）
    output: {
        path: path.resolve(__dirname, './dist'),//Webpack结果存储
        // publicPath: '/dist/',//懵懂，懵逼，//然而“publicPath”项则被许多Webpack的插件用于在生产模式和开发模式下下更新内嵌到css、html，img文件里的url值
        filename: 'js/[name].[hash:8].js', // 设置打包之后的js文件名（加hash值是为了解决浏览器对相同js文件名不重新加载的问题）
    },
    module: {
        // 设置对不同文件进行打包的规则
        rules: [
            // 对.vue文件进行打包规则定义
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader',
            },
            // 对.js文件进行打包规则定义
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
               
            },
            // 对图片进行打包规则定义（添加hash值的作用同上）
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            },
            // 对.css,.scss文件进行打包规则定义
            {
                test: /\.(scss|css)$/,
                use:ExtractTextWebpackPlugin.extract({use: ['css-loader', 'sass-loader'], fallback: 'style-loader',})
            },
            // 对项目中的其他文件进行打包规则定义
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                use:[
                    {loader:'file-loader',options:{name:'fonts/[name].[hash:8].[ext]'}}//项目设置打包到dist下的fonts文件夹下
                ]
            },
        ]
    },
    // 插件
    plugins: [
        // 设置css文件
        new ExtractTextWebpackPlugin('[name].[hash:8].css'),
        // 设置html
        new HtmlWebpackPlugin({
            template: './index.html',
            //filename: 'index.html',
            title: '氧歌',
            //inject:true,  //所有静态资源css和JavaScript都不会自动注入到模板文件中，此处我们手动在html中添加
        }),
        // 进行实例初始化
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery"
        }),
    ],
    // 解析
    resolve: {
        // 创建import或require的别名，来确保模块引入变得更简单
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    devServer: {//webpack-dev-server配置
        // 打包后文件的路由
        contentBase: path.join(__dirname, "./dist"),
        historyApiFallback: true,//不跳转
        noInfo: true, //启用 noInfo 后，诸如「启动时和每次保存之后，那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示。
        inline: true,//实时刷新
        port: 9099, // 端口号
    },
    performance: {
        // hints 打开/关闭提示。此外，当找到提示时，告诉 webpack 抛出一个错误或警告。此属性默认设置为 "warning"
        hints: false //给定一个创建后超过 250kb 的资源：
    },
    devtool: '#eval-source-map' //每个模块使用 eval() 执行，并且 SourceMap 转换为 DataUrl 后添加到 eval() 中。初始化 SourceMap 时比较慢，但是会在重构建时提供很快的速度，并且生成实际的文件。行数能够正确映射，因为会映射到原始代码中。
}

6、在pack.json文件中运行命令。例如：（如下面代码所示只在scripts中设置即可）

{
  "name": "webpackDemo2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-Syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "jquery_lazyload": "^1.9.3",
    "layer-dialog": "^2.1.0",
    "mint-ui": "^2.2.13",
    "node-sass": "^4.9.2",
    "rimraf": "^2.6.2",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "vue": "^2.4.1",
    "vue-loader": "^12.2.2",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.4.1",
    "webpack": "^3.3.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^2.5.1",
    "webpack-merge": "^4.1.3"
  },
  "dependencies": {
    "babel-preset-stage-3": "^6.24.1",
    "vuex": "^3.0.1"
  }
}

7、编写html模版index.html，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <Meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo001</title>
</head>
<body>
    <div class="Box">

    </div>
</body>

8、进入src目录下，编写App.vue文件。例如：

<template>
    <div>
      // 视图窗口
       <router-view></router-view>
    </div>
</template>
<script>
export default{
    data(){
        return{
            msg: 'welcome Vue'
        }
    }
}

9、编写主程序入口文件main.js。例如：

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

Vue.config.debug = true;
new Vue({
    el: '.Box',
    router,
    template: '<App/>',
    components: {App}
})

10、编写路由文件router.js。例如：

import Vue from 'vue';
import Router from 'vue-router';
import homepage from './compontend/home.vue'

Vue.use(Router)

export default new Router({
    
    routes:[
        {
            path:'/',
            component:homepage
        }
    ]
})

11、进入compontend目录下，编写首页页面home.vue。例如：

<template>
    <div>
        111222333
    </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods:{
  }
}
</script>

12、运行npm run dev ,在浏览器中输入http://localhost:9099就可以查看到刚才写的页面

 

13、打包文件 npm run build,运行成功之后文件目录中会生成dist文件夹如下图：

 

 

 

 

 

 

14、注意事项

 14.1 问题：webpack-dev-sever版本不兼容

 解决方法：降低webpack-dev-server的版本号，降低为2.x,例如：npm install webpack-dev-sever@2.5.1 --save-dev

> cross-env NODE_ENV=development webpack-dev-server --open --hot

/Users/smiarnxu/Desktop/webPack/webpackDemo2/node_modules/ajv-keywords/keywords/instanceof.js:52
    throw new Error('invalid "instanceof" keyword value ' + c);
    ^

Error: invalid "instanceof" keyword value Promise
    at getConstructor (/Users/smiarnxu/Desktop/webPack/webpackDemo2/node_modules/ajv-keywords/keywords/instanceof.js:52:11)
    at Ajv.compile (/Users/smiarnxu/Desktop/webPack/webpackDemo2/node_modules/ajv-keywords/keywords/instanceof.js:21:27)
    at Object.useCustomrule (/Users/smiarnxu/Desktop/webPack/webpackDemo2/node_modules/ajv/lib/compile/index.js:275:26)
    at Object.generate_custom [as code] (/Users/smiarnxu/Desktop/webPack/webpackDemo2/node_modules/ajv/lib/dotjs/custom.js:32:24)
    at Object.generate_validate [as validate] (/Users/smiarnxu/Desktop/webPack/webpackDemo2/node_modules/ajv/lib/dotjs/validate.js:347:35)
    at Object.generate_anyOf [as code] (/Users/smiarnxu/Desktop/webPack/webpackDemo2/node_modules/ajv/lib/dotjs/anyOf.js:34:27)
    at generate_validate (/Users/smiarnxu/Desktop/webPack/webpackDemo2/node_modules/ajv/lib/dotjs/validate.js:347:35)
    at localCompile (/Users/smiarnxu/Desktop/webPack/webpackDemo2/node_modules/ajv/lib/compile/index.js:87:22)
    at Ajv.compile (/Users/smiarnxu/Desktop/webPack/webpackDemo2/node_modules/ajv/lib/compile/index.js:56:13)
    at Ajv._compile (/Users/smiarnxu/Desktop/webPack/webpackDemo2/node_modules/ajv/lib/ajv.js:358:27)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpackDemo2@1.0.0 dev: `cross-env NODE_ENV=development webpack-dev-server --open --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpackDemo2@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

14.2 问题：vue、vue-loader、vue-template-compiler之间的版本号不兼容

            解决方法：npm install vue@2.4.1 --save-dev

　　　　　　　　　npm install vue-loader@12.2.2 --save-dev

　　　　　　　　　npm install vue-template-compiler@2.4.1 --save-dev

➜  webpackDemo2 npm run dev

> webpackDemo2@1.0.0 dev /Users/smiarnxu/Desktop/webPack/webpackDemo2
> cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:9099/
webpack output is served from /
Content not from webpack is served from /Users/smiarnxu/Desktop/webPack/webpackDemo2/dist
404s will fallback to /index.html
Hash: bf12754e57d90dd0ef35
Version: webpack 3.3.0
Time: 4151ms
              Asset       Size  Chunks                    Chunk Names
js/main.bf12754e.js    1.64 MB       0  [emitted]  [big]  main
         index.html  410 bytes          [emitted]
   [2] ./node_modules/process/browser.js 5.42 kB {0} [built]
  [19] ./src/App.vue?vue&type=template&id=7ba5bd90& 360 bytes {0} [built] [Failed] [1 error]
  [36] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [37] (webpack)/hot/log.js 1.04 kB {0} [built]
  [38] ./node_modules/vue/dist/vue.esm.js 267 kB {0} [built]
  [40] multi (webpack)-dev-server/client?http://localhost:9099 webpack/hot/dev-server ./src/main.js 52 bytes {0} [built]
  [41] (webpack)-dev-server/client?http://localhost:9099 5.59 kB {0} [built]
  [42] ./node_modules/url/url.js 23.3 kB {0} [built]
  [48] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [50] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
  [82] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
  [88] (webpack)/hot/dev-server.js 1.61 kB {0} [built]
  [89] (webpack)/hot/log-apply-result.js 1.31 kB {0} [built]
  [90] ./src/main.js 199 bytes {0} [built]
  [91] ./src/App.vue 1.06 kB {0} [built] [1 error]
    + 79 hidden modules

ERROR in ./src/main.js
Module not found: Error: Can't resolve './routes' in '/Users/smiarnxu/Desktop/webPack/webpackDemo2/src'
 @ ./src/main.js 4:0-30
 @ multi (webpack)-dev-server/client?http://localhost:9099 webpack/hot/dev-server ./src/main.js

ERROR in ./src/App.vue
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
 @ ./src/main.js 3:0-28
 @ multi (webpack)-dev-server/client?http://localhost:9099 webpack/hot/dev-server ./src/main.js

ERROR in ./src/App.vue?vue&type=template&id=7ba5bd90&
Module parse Failed: /Users/smiarnxu/Desktop/webPack/webpackDemo2/node_modules/vue-loader/lib/index.js!/Users/smiarnxu/Desktop/webPack/webpackDemo2/src/App.vue?vue&type=template&id=7ba5bd90& Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
|
| <div>
|    <router-view></router-view>
|     <!-- <div>
 @ ./src/App.vue 1:0-82 30:4-35:6 30:66-35:5
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:9099 webpack/hot/dev-server ./src/main.js
Child html-webpack-plugin for "index.html":
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 551 bytes {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]

 

 

相关文章

umi 框架 如何配置 自定义 插件 和 loader
一准备工作umi为react的一个封装比较nice的脚手架。优点当然...
webpack之shimming的应用(webpack.ProvidePlugin)
webpack在引入两个依赖的包时，可能需要使用shimming，意思是...
webpack性能优化(TODO)
  Happypack (plugin)多线程使用loader编译文件treeshaki...
前端项目架构分析
一目录结构├──build//构建相关├──config//配置相关├─...
2、管理资源
接着第一节的demo现在我们尝试整合一些其他资源，比如图像，...
面试题： Webpack 的 plugin 和 loader 有什么区别
webpack的打包原理识别入口文件通过逐层识别模块依赖(Common...