Webpack 基础使用

Posted 2020-08-19

使用webstorm编译：

1.新建一个工程（最基本的工程）

2.在webstorm的控制台，使用命令行     cnpm install webpack  -g  全局安装

3.安装完后，可以使用   webpack -h  查看webpack是否安装完成

4.之后，cnpm install webpack --save-dev   将webpack 安装到项目的依赖项

6.最好，安装  loader  ,cnpm install --save-dev  css-loader 和cnpm install --save-dev  style-loader 

7.在工程中，首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js（通过  webpack  生成）

8.用 一个  src  文件夹放源文件，包括css文件和js（包含js主文件main.js）

9.在当前根目录下创建一个   webpack.config.js  （1）var webpack = require(‘webpack‘);    （2

module.exports = {

       entry: ‘./src/main.js‘,

     output: {

        path: `${__dirname}/build`,
        filename: ‘bundle.js‘
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: ‘style!css‘}
        ]
    }
};
10.在webstorm控制台  输入  webpack   即生成JS 入口文件 entry.js