nodejs webpackjs打包

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 压缩
}

　　

3、package.json里scripts添加

"dev": "webpack-dev-server --open --host localhost --port 8080"

4、执行npm run dev