1. mkdir webpack-demo
2.npm init -y 初始化
3. yarn add webpack webpack-cli -D 只用于开发环境不用于生产环境
4.+ index.html /src/index.js
5.npx webpack 构建 生成dist/main.js
6.引入index.html
7.+ webpack.config.js 配置
const path = require("path"); module.exports = { devtool: cheap-eval-source-map, mode: "development", //模式 生产环境会压缩代码 entry: "./src/index.js", //入口 可单文件入口（字符串，数组）和多文件入口（对象）会打包多个bundle output: { //输出bundles文件 &命名文件 可多入口不可多出口 path: patch.resolve(__dirname, "/dist"), //bundle 文件路径，必须绝对路径 filename: "bundle.js" //bundle文件名 }， devServer: { host: , port: 8080, headers: , proxy: { ‘/api‘: { target: ‘http: //baidu.com‘, secure: false, pathRewrite: {‘^/api‘: "} } } }, module: { rules: [ { test: [/\.jsx? $/, /\.tsx? &/], include: [ patch.resolve(__dirname, ‘src‘) ], exclude: [ patch/resolve(__dirname, ‘node_modules‘) ] },{ test: /\.less$/, use: [ "style-loader", "css-loader", "less-loader", { loader: "postcss-loader", options: { plugins: [ autoprefixer({ overrideBrowserslist: ["last 2 versions", ">1% "] }) ] } } ] } ] }, plugins: [ newExtractTextPlugin({ filename: ‘style.css‘ }) ] }