一。webpack的安装

    1.新建个目录 mkdir webpack-demo

    2.进入目录 cd webpack-demo

    3.初始化 npm init

    4.安装webpack npm i webpack --save-dev

二。 webpack打包

        webpack 打包文件名 打包后的文件名 例如 webpack hello.js hello.bundle.js

三，webpack的参数

        module-bind 给模块绑定loader 例如给css绑定style-loader！css-loader

        watch 监听参数

        process 打包过程参数

        等等

四。webpack的配置文件 ----webpack.config,js

        module.exports={

            entry:'./src/script/main.js',

            output:{

                path:'.dist/js',

                filename:'bundle.js'

             }

}

--config的使用

插圖時，沒有文字不能提交

note 2

test

使用npm命令打包：

在package.json中也可配置webpack打包规则，使用命令 npm run webpack 打包

项目文件组织

dist：放置打包后的静态资源文件

src_script：放置项目js脚本文件

src_style：放置项目样式文件

src_index.html：初始化页面，引用打包后的静态资源文件

src_package.json：

src_webpack.config.js：webpack配置文件

    entry：设置入口js文件

    output-path：打包后的文件放置路径

    output-filename：打包后的文件名称

运行webpack即可实现打包

若存在多个webpack配置文件，如webpack.dev.config.js，打包时应使用命令webpack --config webpack.dev.config.js指定使用的配置文件

webpack 3.12.0中 path需要一个绝对路径，所以需要改动一下：

var path = require('path');

module.exropts = {

    entry: './src/script/main.js',

     output: {

            path: path.resolve(__dirname, './dist/js'),

            filename: 'bundle.js'    

    }

}

output中的path 在4版本中必须是绝对路径

var path=require('path');

output:{

path:path.resolve(__dirname,'dist/js'),

filename:'b.js'

}

package.json配置脚本

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.dev.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.4.2",
    "style-loader": "^1.1.3",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "lodash": "^4.17.15"
  }
}

// 指定config文件

webpack --config web.dev.config.js

或

npx webpack --config webpack.dev.config.js

// webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            // 加载css
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            // 加载图片
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            // 加载字体
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
};

webpack.config.js配置：

module.exports={

    entry: './src/script/main.js', // 打包的入口文件

    output: { // 打包后的文件

        path: './dist/js', // 地址

        filename: 'bundle.js' // 打包的文件名称

}   

}

require('style-loader!css-loader./demo.css')

或者 webpack modules.js  --module-bind 'css=style-loader!css-loader'

引入后面的css文件的时候 先用css-loader进行编译

然后再用style-loader去挂载dom  顺序 <-

var path = require('path');
module.exports = {
    entry: './src/script/main.js',
    output: {
        path: path.resolve('./dist/js'),
        filename: 'bundle.js'
     }
  }

webpack hello.js -o hello.bundle.js --module-bind='css=style-loader!css-loader' --model development

在package.json定义命令脚本

指定自定义的config文件

webpack.config.js

module.exports = {

    entry : '  ./src/script/main.js ',

    output: {  

        path: ' ./dist/js',

        filename: 'bundle.js'          

    }

 }

webpack --config  其他的配置文件 

可在package.json scripts:{}里配置简洁写法

打包提示 configuration.output.path: the provided value "./dist/js" is not an absolute path!

the output directory as **absolute path ** (required)

解决

const path = require('path')

module.exports = {

        entry:'./src/script/main.js,

        output:{

                path:path.resolve(__dirname,'./dist/js'),

                filename:'bundle.js'

          }

}

webpack --config webpack.dev.config.js指定配置文件

在项目中，webpack的配置是默认在webpack.config.js中定义的，简单的配置如下：

直接在命令行输入webpack就可进行打包

如果你想在其他文件中进行配置，则在命令行中使用webpack --config webpack.dev.config.js指定新的配置文件

如果想进行上一小节的相关没配置，在这样的项目结构中，做法如下：

之后再命令行中输入 npm run webpack 就可运行上述脚本

webpack和npm run webpack的区别：前者是webpack默认的基本命令，后者是执行package.json里面的scripts标签。

在 webpack.config.js中的"scripts"中添加

"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reason"

在pageage.json中scripts

"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reason"

然后就可以用npm run webpack来运行了

webpack

webpack --config webpack.dev.config.js

shell命令使用webpack需要在项目中安装webpack-command

module.exports = {
    entry:'./src/script/main.js',
    output: {
        path:'./dist/js',
        filename:'boundle.js'
    }
}

这边报错：由于path的路径不是正确的绝对路径

改成这样：

var path = require('path')
module.exports = {
    entry:'./src/script/main.js',
    output:{
        path:path.resolve(__dirname,'./dist/js'),
        filename:'boundle.js'
    }
}

--config 使用其他配置文件

configuration.output.path: The provided value "./dist/js" is not an absolute path!

var path = require('path');

path: path.resolve(__dirname, './dist/js'),

webpack使用配置文件webpack.config.js，打包

webpack 4.11.1

var path = require('path');

module.exports={

entry:"./src/script/main.js",

output:{

path: path.resolve(__dirname, 'dist/js'),

filename:"bundel.js"

}

}

npm中在package.json中scripts加入webpack执行脚本

npm init 初始化

entry --打包入口

output --输出文件