webpack

Posted 2021-05-25 小小小太阳

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\'

　　　　　　})

　　　　]

　　}