webpack学习笔记

webpack中output输出名的解释:
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
其实name会输出entry中的属性名.

webpack中的loader配置:
webpack的loader不仅仅需要用NPM下载和在配置文件中配置,还需要在入口进行加载.
如:import 'style-loader!css-loader!./style.css';

webpack的NPM:
通过在npm的package.json设置:
"scripts": {
"build": "webpack路径"
}
即可通过npm run build对webpack进行构建.

关于入口:
webpack入口文件负责安排其他js该如何执行.可查看该链接:https://segmentfault.com/q/1010000008007520

关于css中的url文件的读取问题:
style-loader和css-loader加载器是无法处理css中url的问题的.我们需要使用file-loader加载器,先在入口js文件中加载那些图片,这样webpack打包后的页面就能识别这些图片了.至于上面说的带有url的css,这之后就只需要交给style-loader和css-loader进行处理了.

多入口对应的多输出:

entry: {
        'register/register':'./src/register_entry.js',
        'file_upload/file_upload':'./src/file_upload_entry/file_upload_entry.js'
    }

将属性名换成路径字符串,那么通过入口文件打包的文件会生成在

output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist')
    }

output中path所指定的位置.同时file_upload/file_upload中的最后一个地址名,会成为文件名的一部分.
但是这里有个坑,那就是一开始的index.html文件,只能存在于dist目录下,否则会提示找不到js文件.但其他html文件则不存在这个问题.

import vue的坑:
引入vue的时候一定要这么写:import Vue from 'vue/dist/vue.js';
而不是这么写import Vue from 'vue';
后一种写法会导致vue不正常的工作.

webpack学习笔记

推荐阅读更多精彩内容