Webpack打包

最新推荐文章于 2024-08-14 10:08:54 发布

zyy151007

最新推荐文章于 2024-08-14 10:08:54 发布

阅读量76

点赞数

文章标签： webpack javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/zyy151007/article/details/129429089

版权

1.打包js文件

1. 创建对应的文件【对应的依赖关系】

2. 安装对应的包

npm install webpack@4.32.2 webpack-cli@3.3.2 webpack-dev-server@3.5.1 -D-S

3. 配置入口文件/出口文件

在根目录下创建webpack.config.js文件

            const path = require('path');
            module.exports = {
                // 入口 - 打包的入口
                entry: './src/index.js',
                // 出口 - 打包输出的位置
                output: {
                    // path-打包之后输出的位置
                    path: path.resolve(__dirname, 'dist'),
                    // filename-打包之后的文件的名称
                    filename: 'bundle.js'
                }
            };

4. 配置命令行

在package.json的scripts中配置

 "scripts": {
     "start": "webpack --config webpack.config.js --mode development"
  }

5. 执行命令行

npm run start

6. 报错（版本不适配问题）

在vscode下执行 $env:NODE_OPTIONS="--openssl-legacy-provider"

7. 在vscode终端中，执行 npm run start

3.打包css

1. 创建css文件

需要在index.js中引入css文件

  import "./css/index.css"

2. 安装插件

cnpm install css-loader@3 --save-dev

cnpm install style-loader@2 --save-dev

3. 配置插件

在webpack.config.js

            module: {
                rules: [
                    {
                        test: /\.css$/,
                        use: [
                            'style-loader' ,
                            'css-loader'
                        ]
                    }
                ]
            }

保存代码

4. 直接打包就可以

npm run start

4.解析*.vue文件

1. 安装

npm i vue-loader@15.9.5 -D-S

npm i vue-template-compiler@2.6.12 -D-S

npm i vue@2.6.12 -S

2. 在根目录下创建文件夹public

/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue打包</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

3.在src中创建App.vue

/src/App.vue

<template>
  <div  id="app">
  app配置
  </div>
</template>

<script>
export default {

}
</script>

<style>
   
</style>

4. 在src中创建main.js入口文件

/src/main.js

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

new Vue({
  render: h => h(App)
}).$mount('#app')

5.在src中创建components文件夹

components/Top.vue是一个普通组件

<template>
  <div class="Top">Top普通组件</div>
</template>

<script>
export default {

}
</script>

<style>
    
</style>

App.vue中引入Top这个普通组件

import MyFoot from './components/MyFoot.vue'

挂载Top普通组件

export default {

components:{

MyFoot

}

页面中使用（App.vue中）

<my-foot></my-foot>

6.webpack.config.js下的plugins插件中

1.template的路径修改为‘public下的index.html’(/public/index.html)

template: "./public/index.html",

2.修改entry入口文件为 /src/main.js

entry: "./src/main.js",

3.配置

先引入 const VueLoaderPlugin = require("vue-loader/lib/plugin");

在rules中配置

{
   test: /\.vue$/,
   use: ["vue-loader"],
},

在plugins中使用

new VueLoaderPlugin()