webpack中dev-server不写contentBase时如何设置可以显示页面并且加载js
今天学习了dev-server这个配置,中间遇到疑惑,我写了contentBase是可以走通,可以再localhost:8080看到页面并且正确加载bundle.js的,
但是这个contentBase并不是必须的,不写按理说也可以实现显示页面并且加载js,但是我去掉后,可以编译成功,但是我这里就遇到问题了,一直提示找不到bundle.js。
我的目录设置如下:
其中index.html是我手动写的里面用script标签来引用bundle.js。
<script src="./js/bundle.js"></script>
这里的路径要根据index.html所在的位置来引用bundle.js所以要就加上js这个文件夹。
我的webpack.config.js配置如下:
/** * Created by zxf on 2017/4/25/0025. */ const path=require('path'); var htmlPlugin=require('html-webpack-plugin'); module.exports={ entry:'./src/js/main.js', output:{ filename:'js/bundle.js', path:path.resolve(__dirname,"./dist") }, module:{ rules:[ { test:/\.css$/, use:[ {loader:'style-loader'}, {loader:'css-loader'} ]} ] }, devServer:{ inline:true } }
那么配置好上面的,运行webpack-dev-server后编译没有报错,但是打开localhost:8080,发现并没有自动显示index.html的内容,
而是显示根目录下的文件夹以及webpack配置文件,这个可以理解因为并没有显式的设置contentBase,我可以手动点击进入dist文件夹下,
进入后就会提示找不到bundle.js,因为我在html文件里面写了<script src="./js/bundle.js"></script>这里我认为是dev-server并没有去获取内存中的js,
而是一直在获取本地的bundle.js,不应该啊,dev-server是会在内存中生成js和html页面的,这是为什么呢?后来经过大神指点,明白了,
原来不指定contentBase的话dev-server的默认根目录是在webpack.config同一级的目录下,我在这个目录下并没有写index.html,而在dist/下写了index.html,
它就以这个本地我写的为准了,而内存中的html的路径还是在根目录下,解决方法是在根目录下新建一个index.html,里面引用js的路径不用改,但是这样很不方便啊,
如果是多页应用,不可能在根目录下建立那么多页面文件,这里有两个思路:一是必须写上contentBase参数,二是利用webpack-html-plugin这个插件它可以生成html文件到指定的目录下,这样就可以不用再根目录下建立页面文件了,直接在src下建立模板文件,
/** * Created by zxf on 2017/4/25/0025. */ const path=require('path'); var htmlPlugin=require('html-webpack-plugin'); module.exports={ entry:'./src/js/main.js', output:{ filename:'js/bundle.js', path:path.resolve(__dirname,"./dist/") }, module:{ rules:[ { test:/\.css$/, use:[ {loader:'style-loader'}, {loader:'css-loader'} ]} ] }, plugins:[ new htmlPlugin({ filename:'index.html', template:"./src/index.html" }), new htmlPlugin({ filename:'b.html', template:"./src/b.html" })], devServer:{ inline:true } }
有几个页面就写几个new htmlPlugin()配置,template参数写上模板的路径,这样也可以实现不写contentBase的情况下正确显示页面并且加载js