webpack 4 demo

链接:https://pan.baidu.com/s/1yfRH0-aPwEuerF_af4NDNg
提取码:jxmx

模块包括:
1)加载器:babel-loader、css-loader、style-loader、url-loader
2)插件:html-webpack-plugin、mini-css-extract-plugin
3)热替换:webpack-dev-server。
可进行基本的js、css、html、图片的打包。

package.json
{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "babel-loader": "^8.0.6",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.6.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }
}


webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //引入"mini-css-extract-plugin",打包时分离css文件
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入"html-webpack-plugin",打包HTML文件

module.exports = {
    mode: 'development',
    devServer: {//可进行热替换
        contentBase: path.join(__dirname, 'dist'),
        compress: false,//是否压缩
        port: 8088
    },
    entry: {
       main: './src/main.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js' //生成多个对应的打包的js文件,name对应entry中的k-v中的key值
    },
    module: {
        rules: [
            //bable-loader 转码器
            {
                test: /\.m?js$/, //正则
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-object-rest-spread'] //添加支持的插件,如支持React语法规则,注意:正则需要扩展文件的扩展名
                    }
                }
            },
            //css-loader 处理css
            {
                test: /\.css$/,
                use: [
                    // "style-loader", // creates style nodes from JS strings
                    MiniCssExtractPlugin.loader,
                    "css-loader", // translates CSS into CommonJS
                    // "sass-loader" // compiles Sass to CSS, using Node Sass by default]
                ]
            },
            {//url-loader 处理图片
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader?limit=10000&name=imgs/[name].[ext]',
                    }
                ]
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: 'css/[name].css',
            chunkFilename: '[id].css',
        }),
        new HtmlWebpackPlugin({
            title: 'Good Morning',//title可以应用到html文件中
            filename: 'index.html',//输出文件
            template: 'index.html'//自己的输入文件
        })
    ]
};


ReadMe.txt
npm install
npm run build
npm run start
打开网页:localhost:8088/
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 1,759评论 0 1
  • HTML5与CSS3权威指南+配套源码https://pan.baidu.com/s/1dhUbZ6anvKLPV...
    丶温瞳阅读 16,995评论 1 34
  • 在程序当中经常需要延时执行某些操作,而常用的延时方法有四种。 performSelector方法 声明 代码举例 ...
    a315c2a13dc5阅读 188评论 0 0
  • 我曾经有一个小院子,小院子在一个中学里,中学在一个小镇上。 中学不大,仅仅装得下我的童年而已。有枝叶...
    她想阅读 343评论 0 4