vueJS06Webpack的使用

1.Webpack的基本使用

//1.全局安装webpack
        //npm install [email protected] -g
        //npm i [email protected] -g
        //npm info webpack
        //webpack -v
        //npm root -g  //查看全局安装路径

//1.创建一个目录
//2.在目录下使用 npm init -y 生成package.json
//3.在项目目录下安装jquery npm install jquery –save
//4.写一个main.js 作为我们项目的入口文件
//main.js作为项目的入口文件
//我们可以在该文件中引入项目所用到的所有资源

import $ from ‘jquery’;

KaTeX parse error: Expected '}', got 'EOF' at end of input: …unction(){     (“li:odd”).css(“backgroundColor”,“yellow”);
    $(“li:even”).css(“backgroundColor”,“green”);
})

//5.输入命令
webpack ./src/main.js -o ./dist/bundle.js

//6.将打包后的bundle.js引入到html文件中

2.webpack.config.js的基本使用
//1.在项目根目录下创建一个文件，名字叫webpack.config.js
//路径操作的模块
var path = require(“path”);

//使用的是CommonJS的规范
module.exports = {
   //指定项目的入口
   entry:path.resolve(__dirname,‘src/main.js’),
   //指定打包后的文件位置和以及文件名
   output:{
     path:path.resolve(__dirname,‘dist’),
     filename:‘bundle.js’  
   }
}

//2.直接输入webpack命令进行打包

3.项目实时打包构建
//1.在项目中安装webpack-dev-server和webpack和webpack-cli
npm i [email protected] --save-dev

npm i [email protected] --save-dev //项目中安装webpack
npm i [email protected] --save-dev

//2.修改index.html中bundle.js的引入
script src="…/bundle.js">

//3.修改package.json中的script
“scripts”: {
    “test”: “echo “Error: no test specified” && exit 1”,
    “dev”: “webpack-dev-server --open --port 3000 --hot --contentBase src”
  },
//4.在webpack.config.js中新增了mode的配置
module.exports = {
   mode:“development”,

//5.使用npm run dev来构建了

// --open含义：构建完成自动打开浏览器
// --port 3001 : 指定运行的端口
// --contentBase src : 指定运行的根目录是src，即认为src就是项目根目录
// --hot : 热更新，是指当你对代码修改并保存后，webpack将会对代码进行重新打包，并将改动的模块发送到浏览器端，浏览器用新的模块替换掉旧的模块，去实现局部更新页面而非整体刷新页面。

注意点: webpack-dev-server在打包的时候，并没有把打包后的文件放入到磁盘中，而是把打包后的bundle.js放到内容中(位于项目根路径下)

//6.使用配置方式来写webpack-dev-server
//6.1 修改webpack.config.js文件
//路径操作的模块
var path = require(“path”);
//开启热更新第二步
var webpack = require(“webpack”);

//使用的是CommonJS的规范
module.exports = {
    mode: “development”,
    //指定项目的入口
    entry: path.resolve(__dirname, ‘src/main.js’),
    //指定打包后的文件位置和以及文件名
    output: {
        path: path.resolve(__dirname, ‘dist’),
        filename: ‘bundle.js’
    },
    devServer: {
        open: true,
        port: 3000,
        contentBase: “src”,
        //开启热更新第一步
        hot: true
    },
    //开启热更新的第三步
    plugins: [
        new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
    ]
}

//6.2 修改package.json
“scripts”: {
    “test”: “echo “Error: no test specified” && exit 1”,
    “dev”: “webpack-dev-server”
  },

npm i [email protected] --save 安装生产环境的依赖 dependencies
npm i [email protected] --save-dev 安装开发环境的依赖 devDependencies
npm i [email protected] -g 全局安装

“dependencies”: {
    “jquery”: “^3.4.1”
  },
  “devDependencies”: {
    “webpack”: “^4.27.1”,
    “webpack-cli”: “^3.1.2”,
    “webpack-dev-server”: “^3.1.9”
  }

4.html-webpack-plugin插件的使用
//1.安装插件
npm i [email protected] --save-dev

//2.在webpack.config.js中添加配置

//引入安装html-webpack-plugin插件
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

//开启热更新的第三步
    plugins: [
        new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
        //HtmlWebpackPlugin 可以帮我们把html配置到内存中，并且自动注入打包后的bundle.js
        new HtmlWebpackPlugin({
            //指定要处理哪个html文件
            template:path.resolve(__dirname,“src/index.html”),
            //指定内存中的html文件的名字
            filename:“index.html”
        })
    ]

6.加载css文件
//1.安装css的加载器
npm i style-loader css-loader --save-dev

//2.修改webpack.config.js
module: {
        rules: [
            /配置css文件的加载器/
            {
                test: /.css$/,
                use: [‘style-loader’, ‘css-loader’]
            }
        ]
    }

//3.在main.js中引入对应的css样式资源了

7.使用less、sass
npm i less-loader less --save
npm i [email protected] node-sass --save-dev

修改webpack.config.js文件
rules: [
            /配置css文件的加载器/
            {
                test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 68: …']             }̲,             {…/,
                use: [‘style-loader’, ‘css-loader’, ‘less-loader’]
            },
            {
                test: /.scss$/,
                use: [‘style-loader’, ‘css-loader’, ‘sass-loader’]
            }
        ]

在main.js中就可以引入less和scss文件了

npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass
如果要使用sass，那么需要安装python

7.字体图标的使用
npm i url-loader file-loader --save-dev

{
                test: /.(ttf|eot|svg|woff|woff2)$/,
                use: [
                    {
                        loader: ‘url-loader’
                    }
                ]
            },

8. css中图片路径的问题

{
                test: /.(png|jpg|gif|bmp|jpeg)$/,
                use: [
                    {
                        loader: ‘url-loader’,
                        options: {
                            //如果图片小于8kb，就使用base64编码
                            //如果图片大于8kb，就给图片重新去个名字
                            limit: 8192,
                            name: ‘[hash:8]-[name].[ext]’
                        }
                    }
                ]
            }

9.babel的使用
npm i [email protected] [email protected] babel-plugin-transform-runtime --save-dev

npm i babel-preset-env babel-preset-stage-0 --save-dev

修改webpack.config.js文件
{
                test: /.js$/,
                use: [‘babel-loader’],
                exclude: /node_modules/
            }

在项目根目录下创建一个.babelrc文件
{
    “presets”: [
        “env”,
        “stage-0”
    ],
    “plugins”: [
        “transform-runtime”
    ]
}

10.vue结合webpack的使用
//1.将之前项目 package.json package-lock.json webpack.config.js .babelrc 四个文件拷贝到新项目中去
//2.在新项目中npm install 装包
//3.在项目安装vue npm install [email protected] --save
//4.修改webpack.config.js配置
resolve: {
        alias: {
            ‘vue$’: ‘vue/dist/vue.js’
        }
    },
//5.就可以在main.js中使用vue的基本语法了

11. .vue文件的使用
    1.在vscode中安装vetur插件，可以帮我们格式化vue文件的代码，有一些智能提示功能
    2.安装vue-loader以及vue-template-compiler (注意版本号的问题)
    npm i [email protected] [email protected]
    3.修改webpack.config.js配置文件，添加vue的插件和加载器
    plugins: [
            new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
            //HtmlWebpackPlugin 可以帮我们把html配置到内存中，并且自动注入打包后的bundle.js
            new HtmlWebpackPlugin({
                //指定要处理哪个html文件
                template: path.resolve(__dirname, “src/index.html”),
                //指定内存中的html文件的名字
                filename: “index.html”
            }),
            //配置VueLoaderPlugin插件
            new VueLoaderPlugin()
        ],

{
                test: /.vue$/,
                use: [‘vue-loader’]
            }
4.我们就可以创建.vue文件了，可以在main.js中引入.vue文件了

12.es6模块化规范
//1.模块的导出
var kk = {
    title:“祖国你好”
};
export default kk;   //导出默认的数据
//导出默认数据 只能导出一个

//导出其他数据，可以导出很多个
export var name = “张三”;
export var age = 18;

//2.模块的引入
//引入模块  
//如果引入的是export default方式导出的，则不需要加{}，而且变量名字任意
//如果引入的是export方式导出的，则需要加{}，而且变量名字必须和之前导出的名字一致。如果想不一致，我们可以通过as的方式取别名
import kk2, { name as name1, age } from ‘./test’
console.log(kk2);
console.log(name1, age)

13.组件的数据、事件和样式