webpack学习

 目录结构：

webpack-demo/
  ├── src/
  │   ├── index.js
  │   └── style.css
  ├── dist/
  ├── webpack.config.js
  └── package.json

 

安装webpack及常用加载器：

npm init -y
npm install webpack webpack-cli --save-dev
npm install --save-dev css-loader style-loader sass-loader ts-loader

打包命令：

 

npx webpack

 

webpack配置文件：webpack.config.js

module.exports = {
    "mode": "production",

    "output": {
        filename: 'bundle.js',
        clean: true
    },
    module: {
        rules: [
            {
                test: /\.css$/, use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                    { loader: 'sass-loader' },
                ]
            },
            { test: /\.ts$/, use: 'ts-loader' },
        ],
    },
}

 

安装

DevServer

npm install webpack-dev-server --save-dev

webpack配置文件：webpack.config.js

devServer: {
       port: 9000,
 },

package.json配置文件：

  "scripts": {
    "build": "webpack --mode development",
    "dev":" webpack serve --open"
  },