webpack打包

1.找到项目初始路径  建立文件夹mkdir mywebpack

2.cd mywebpack     npm init初始化

3.npm install webpack --save-dev 项目中安装webpack

4.找到项目然后根目录下建立文件hello.js

5. webpack hello.js   finishHello.js 控制台执行命令 第一个是打包的文件名 第二个是打包后的文件名称

6.hello.js通过require('./')引入另一个js文件  重新打包后观察新生成的finishHello.js

7.引入的css文件不生效执行 webpack  hello.js finishHeelo.js  --module-bind  'css=style-loader!css-loader'  --watch( 检测文件内容变化)

/--   --progess进度 --display-module打包模块 --colors字体是彩色的 --display-reason打包原因

建立项目的webpack配置：

1.根目录下建立webpack.config.js内容为 module.exports={

    entry：打包入口文件名称，

output：{

    path：打包后文件路径，

filename:打包后文件名称

}

resolve:{

    extensions: ['.js', '.vue', '.json'],//自动补全引入 文件后缀

    alias: {
      'vue$': 'vue/dist/vue.esm.js',

       fallback：‘。。。node-modules'引入插件找不到时自动从mode-module里面找’
      alias：//设置路径别名缩短字符串长度
    }

}

2.命令行执行webpack直接打包默认执行文件名成为webpack.config.js内容（若果改名执行webapck --config 新名称）

3.或者执行命令写在package.json文件的scripts目录下  命令行执行 npm run webapck