nodejs webpackjs打包

原创

mb62b9178dc218f 2022-06-27 10:57:28 博主文章分类：html js css ©著作权

文章标签 css html json 文章分类 Webpack 前端开发

©著作权归作者所有：来自51CTO博客作者mb62b9178dc218f的原创作品，请联系作者获取转载授权，否则将追究法律责任

webpack打包可以自动将es6语法的js文件将为amd cmd浏览器可以使用的js文件

1、npm install webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader less-loader sass-loader node-sass postcss-loader autoprefixer url-loader file-loader babel-loader @babel/core @babel/runtime @babel/preset-env @babel/plugin-transform-runtime @bable/plugin-proposal-class-properties vue-loader vue-template-complier

2、创建webapck.config.js

const path = require('path')
const HtmlWebPlugin = require('html-webpack-plugin')
const VueLoaderPlugin=require('vue-loader/lib/plugin')
const htmlPlugin = new HtmlWebPlugin({
    template: './src/index.html',
    filename: 'index.html'
})
module.exports = {
    entry: path.join(__dirname, './src/index.js'), //要打包的文件
    output: { //打包成目标文件
        path: path.join(__dirname, './dist'),
        filename: "index.js"
    },
    plugins: [
        htmlPlugin,new VueLoaderPlugin()
    ],
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader' },
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
            { test: /\.vue$/,use: 'vue-loader' }
        ]
    },
    mode: "development" //development不压缩 production 压缩
}