新建文本文档 (2)

最新推荐文章于 2022-06-29 21:26:50 发布

努力的琦琦

最新推荐文章于 2022-06-29 21:26:50 发布

阅读量711

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48210599/article/details/108066683

版权

webpack手动搭建环境

1,什么是webpack

本质上，，WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。webpack的理念就是一切皆模块化，把一堆的css文件和js文件放在一个总的入口文件，通过require引入，剩下的事情webpack会处理，包括所有模块的前后依赖关系，打包、压缩、合并成一个js文件，公共代码抽离成一个js文件、某些自己指定的js单独打包，模块可以是css/js/imsge/font等等。

2，为什么要使用webpack

在进入公司的时候面试往往需要问怎么用webpack来搭建一个项目，有的公司不使用webpack搭建项目自己使用webpack来搭建一个vue项目，而且webpack用来管理项目也是及其舒服的

3，webpack搭建ES6开发环境步骤

第一步：

安装模块

创建package.json文件

# 手动配置
npm init
# 自动配置
npm init -y

安装webpack工具

# 安装webpack和webpack-cli
cnpm install webpack webpack-cli --save-dev

安装babel相关

# 安装 babel和react相关加载器
cnpm i babel-loader @babel/core @babel/preset-env -D

第二步：

创建目录结构

--myapp

– public [静态资源文件目录]

– src [ 项目源文件目录 ]

– dist [ 打包文件目录 ]

– webpack.config.js [ webpack配置文件 ]

– package.json [ NPM包管理配置文件 ]

– node_modules [ 项目中的依赖存放目录 ]

在public中创建index.html文件，将该文件设置为首页

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>Hello React Webpack</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

在src目录下，创建index.js该文件为项目的入口文件
```
console.log("hellow webpack")
```

在项目的根目录下新建webpack.config.js配置文件

配置入口

module.exports = {
	entry:'./src/index.js'
}

配置口

const path = require('path');
module.exports = {
	// ...
	output: {
	    path: path.resolve(__dirname, 'dist'),
	    filename: 'main.js'
	}
}

配置加载器

module.exports = {
	// ...
	module:{
		rules:[
			{
				test: /\.css$/,
				use:['style-loader','css-loader']
			},
			{
				test: /\.js?$/, // jsx/js文件的正则
				exclude: /node_modules/, // 排除 node_modules 文件夹
				use:{
                    // loader 是 babel
                    loader: 'babel-loader',
                    options: {
                        // babel 转义的配置选项
                        babelrc: false,
                        presets: [
                            [require.resolve('@babel/preset-env'), {modules: false}]
                        ],
                        cacheDirectory: true
                    }
                }
			}
		]
	}
}

配置插件

const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
	// ...
	plugins:[
		new HtmlWebPackPlugin({
			template: 'public/index.html',
			filename: 'index.html',
			inject: true
		})
	]
}

执行打包命令
```
npm run build
```

第三步：

搭建本地服务
```
cnpm i webpack-dev-server -D
```

在webpack.config.js文件中配置本地服务信息

module.exports = {
	// ...
	devServer: {
		contentBase: './dist',
		host: 'localhost',
		port: 9999
	}
}

package.json文件配置启动命令

 "scripts": {
        "dev": "webpack-dev-server --mode development --open"
    }

启动服务
```
npm run dev
```

4，集成vue

我们参考 vue-loader 先安装 vue vue-loade rvue-template-compiler。然后在 webpack.config.js中配置 vue-loader。

npm install -P vue
npm install -D @babel/core @babel/preset-env vue-loader vue-template-compiler babel-loader css-loader  vue-style-loader css-loader

webpack.config.js 增加的部分如下

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

module.exports = {

  plugins: [
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
    ]
  }
};

此时的项目结构如下

simplest-webpack-vue
  - dist
    - index.html
  - src
    - App.vue
    - main.js
  - packge.json
  - webpack.config.js

dist/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>my project</title>
</head>
<body id="app">
  <script src="./index.bundle.js"></script>
</body>
</html>

src/App.vue

<style>
  .app {color: red}
</style>

<template>
  <div class="app">{{msg}}</div>
</template>
<script>
export default {
  data() {
    return {
      msg: 'hello'
    }
  }
}
</script>

src/main.js

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

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

3. 集成 Vue-Router

首先安装 vue-router

npm install -D vue-router

文件夹结构图如下所示：

simplest-webpack-vue
  - dist
    - index.html
  - src
    - components
      - Home.vue
      - Products.vue
    - js
      - common
        - router-config.js
    - App.vue
    - main.js
  - packge.json
  - webpack.config.js

webpack.config.js

module.exports = {

  resolve: {
    alias: {
      cp: path.resolve(__dirname, 'src/components/'),
      js: path.resolve(__dirname, 'src/js/'),
      css: path.resolve(__dirname, 'src/css/')
    }
  },
  
}

src/main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import RouterConfig from 'js/common/router-config.js';

import App from './App.vue';

Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  router: new VueRouter(RouterConfig)
}).$mount('#app');

js/common/router-config.js

import Home from "cp/Home.vue";
import Products from "cp/Products.vue";

export default {
  routes: [{
    name: 'home', path: '/', component: Home
  },{
    name: 'products', path: '/products', component: Products
  }]
}

src/App.vue

<template>
  <div id="app"><router-view></router-view></div>
</template>

src/components/Home.vue

<template>
  <div class="home-page">
    home page
  </div>
</template>

src/components/Products.vue

<template>
  <div class="products-page">
    products
  </div>
</template>

package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --host 0.0.0.0 --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "vue-loader": "^15.9.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "vue": "^2.6.11"
  }
}s