webpack简单配置

Posted 2021-02-12 Ressiry

webpack有4个重点内容：

• 入口(entry)：指示webpack 应该使用哪个模块，来作为构建其内部依赖图的开始

• 输出(output)：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist

• 加载器(loader)：loader 让 webpack 能够去处理那些非 javascript 文件，比如css，图片

• 插件(plugins)：插件可以用于执行范围更广的任务，比如打包优化和压缩

随时切换镜像源：?

　　1. npm install nrm -g // 安装nrm?

　　2. nrm ls // 查看镜像源?

　　3. nrm use taobao // 选择淘宝镜像，也可以选择cnpm

webpack安装

　　npm init -y

　　npm i webpack -D

　　npm i webpack-cli -D

 

webpack初始使用

1. 根目录下面新建src目录，在该目录下面创建自己的js文件

2. 然后运行npx webpack 将创建出来的js文件打包，(会生成一个dist目录，默认打包出来的文件是main.js)此时会有警告，意思是mode选项没有设置。mode模式有两种，一种是deveopment，一种是production

3. 添加mode选项，运行命令npx webpack --mode development

4. 修改代码，自动重新打包，运行命令npx webpack --mode development --watc

webpack热更新

1. 安装`npm i webpack-dev-server -D

let path = require(‘path‘)

module.exports = {
  // 入口文件配置
  entry: "./src/index.js",

  // 出口文件配置项
  output: {
    // 输出的路径，必须是绝对路径
    path: path.join(__dirname, ‘dist‘),
    // 输出文件名字
    filename: "bundle.js",
    // 2. 静态资源打包出来在服务器上运行时的访问路径，可以直接http://localhost:8080/dist/bundle.js访问到服务器中的bundle.js文件
    publicPath: ‘/dist‘
  },
  mode: ‘development‘
}

3. index.html中修改 <script src="/dist/bundle.js"></script>

4. 运行：npx webpack-dev-server

5. 运行：npx webpack-dev-server --inline --hot --open --port 8090 --hot热重载

6. 配置script："dev": "webpack-dev-server --inline --hot --open --port 8090"

7. npm run dev

webpack配置文件(针对Vue)

1. 配置webpack.config.js

2. 运行npx webpack

let path = require(‘path‘)
let HtmlWebpackPlugin = require(‘html-webpack-plugin‘)

module.exports = {
    // entry 属性表示入口文件路径
    entry: ‘./src/index.js‘,

    // output表示输出配置
    output: {
        // path属性表示输出路径 该路径只能为一个绝对路径
        path: path.join(__dirname, ‘dist‘),

        // filename属性表示给输出的文件取名
        filename: ‘bundle.js‘,

        //publicPath 表示静态资源在服务器的存放路径
        // publicPath: ‘/dist‘
    },

    // module属性用来处理文件模块
    module: {
        // rules 主要用来表示各种文件使用哪种loader加载器
        rules: [
            {
                // test表示处理的文件类型，它后面跟一个正则
                test: /.css$/,
                // use表示使用哪些loader
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            },
            {
                test: /.less$/,
                use: [{
                    loader: ‘style-loader‘
                }, {
                    loader: ‘css-loader‘
                }, {
                    loader: ‘less-loader‘
                }]
            },
            {
                test: /.scss$/,
                use: [{
                    loader: ‘style-loader‘
                }, {
                    loader: ‘css-loader‘
                }, {
                    loader: ‘sass-loader‘
                }]
            },
            {
                test: /.(png|jpg|gif|eot|svg|ttf|woff)/,
                use: [{
                  loader: ‘url-loader‘,
                  // options表示配置项
                  options: {
                    // limit属性表示如果图片大小大于limit参数的值，那就用路径的形式展示；如果图片小于limit参数的值，那就用base64格式展示。（单位是b）
                    limit: 40000
                  }
                }]
            },
            {
                test: /.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: ‘babel-loader‘,
                  // options: {
                  //   presets: [‘@babel/preset-env‘]
                  // }
                }
            }
        ]
    },

    // 插件
    plugins:[
        new HtmlWebpackPlugin({
            // template 表示最后生成的HTML页面以哪个文件为模板
            template:‘template.html‘,
            // filename表示最后根据模板页面生成的新的HTML页面
            filename:‘index.html‘
        })
    ],

    // 指定mode为开发模式
    mode:‘development‘
}

对应的.babelrc

{
    "presets": ["@babel/preset-env"]
}

 

对应的package.json文件(相应npm安装包即可)

{
  "name": "test-webpack",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 8090"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "vue": "^2.5.17",
    "vue-router": "^3.0.2"
  },
  "description": ""
}